fix: add html option for inline notification

src/components/CvNotification/CvInlineNotification.stories.js

@@ -1,7 +1,8 @@
 import { action } from '@storybook/addon-actions';
-import { sbCompPrefix } from '../../global/storybook-utils';
+import { sbCompPrefix, storySourceCode } from '../../global/storybook-utils';
 
 import { CvInlineNotification, CvNotificationConsts } from '.';
+import DocumentationTemplate from './CvInlineNotificationTemplate.mdx';
 
 export default {
   title: `${sbCompPrefix}/CvInlineNotification`,
@@ -59,6 +60,11 @@ export default {
       control: { type: 'boolean' },
     },
   },
+  parameters: {
+    docs: {
+      page: DocumentationTemplate,
+    },
+  },
 };
 
 const template = `<cv-inline-notification v-bind="args" @action="onAction" @close="onClose" />`;
@@ -79,31 +85,82 @@ const Template = args => {
 export const Info = Template.bind({});
 Info.args = {
   kind: CvNotificationConsts.notificationKinds[0],
+  primary: true,
+};
+Info.parameters = {
+  docs: { source: { code: storySourceCode(template, Info.args) } },
 };
 
 export const InfoSquare = Template.bind({});
 InfoSquare.storyName = 'Info square';
 InfoSquare.args = {
   kind: CvNotificationConsts.notificationKinds[1],
 };
+InfoSquare.parameters = {
+  docs: { source: { code: storySourceCode(template, InfoSquare.args) } },
+};
 
 export const Success = Template.bind({});
 Success.args = {
   kind: CvNotificationConsts.notificationKinds[2],
 };
+Success.parameters = {
+  docs: { source: { code: storySourceCode(template, Success.args) } },
+};
 
 export const Warning = Template.bind({});
 Warning.args = {
   kind: CvNotificationConsts.notificationKinds[3],
 };
+Warning.parameters = {
+  docs: { source: { code: storySourceCode(template, Warning.args) } },
+};
 
 export const WarningAlt = Template.bind({});
 WarningAlt.storyName = 'Warning (alt)';
 WarningAlt.args = {
   kind: CvNotificationConsts.notificationKinds[4],
 };
+WarningAlt.parameters = {
+  docs: { source: { code: storySourceCode(template, WarningAlt.args) } },
+};
 
 export const Error = Template.bind({});
 Error.args = {
   kind: CvNotificationConsts.notificationKinds[5],
 };
+Error.parameters = {
+  docs: { source: { code: storySourceCode(template, Error.args) } },
+};
+
+const templateSlots = `
+  <cv-inline-notification v-bind="args">
+    <template #title>
+      <h2>Big title</h2>
+    </template>
+    <template #subtitle>
+    Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, seed do eiusmod tempor <strong>incididunt ut labore</strong> et dolore magna aliqua.
+    </template>
+  </cv-inline-notification>`;
+const SlotTemplate = args => {
+  return {
+    components: { CvInlineNotification },
+    template: templateSlots,
+    setup() {
+      return {
+        onAction: action('action'),
+        onClose: action('close'),
+        args,
+      };
+    },
+  };
+};
+export const Slots = SlotTemplate.bind({});
+Slots.args = {
+  kind: CvNotificationConsts.notificationKinds[0],
+  actionLabel: '',
+  hideCloseButton: true,
+};
+Slots.parameters = {
+  docs: { source: { code: storySourceCode(templateSlots, Slots.args) } },
+};

src/components/CvNotification/CvInlineNotification.vue

@@ -15,10 +15,14 @@
       />
       <div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
         <p :class="`${carbonPrefix}--inline-notification__title`">
-          {{ title }}
+          <slot name="title">
+            {{ title }}
+          </slot>
         </p>
         <div :class="`${carbonPrefix}--inline-notification__subtitle`">
-          {{ subTitle }}
+          <slot name="subtitle">
+            {{ subTitle }}
+          </slot>
         </div>
       </div>
     </div>
@@ -35,6 +39,7 @@
       {{ actionLabel }}
     </button>
     <button
+      v-if="!hideCloseButton"
       type="button"
       :aria-label="closeAriaLabel"
       :class="`${carbonPrefix}--inline-notification__close-button`"
@@ -66,7 +71,7 @@ export default {
       type: String,
       default: '',
     },
-    /** Notification sub title (supports HTML) */
+    /** Notification subtitle */
     subTitle: {
       type: String,
       default: '',
@@ -86,6 +91,11 @@ export default {
       type: Boolean,
       default: false,
     },
+    /** Set to true to hide the code button */
+    hideCloseButton: {
+      type: Boolean,
+      default: false,
+    },
   },
   emits: [
     /** Emitted on clicking the action button */

src/components/CvNotification/CvInlineNotificationTemplate.mdx

@@ -0,0 +1,16 @@
+import { Meta, Title,  Primary, Stories } from '@storybook/addon-docs';
+
+<Meta isTemplate />
+
+<Title />
+
+Migration notes:
+
+- **Breaking**. The `subTitle` property no longer renders html. Please use the `subtitle` slot instead.
+- The `title` content can now be provided in the `title` slot.
+
+<Primary />
+
+<Controls />
+
+<Stories />