Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
feat: v-html in notifications to allow markup (#1035)
* feat(inlinenotification): change subtitle to use vhtml to allow markup

* feat(toastnotification): toast to  use vhtml to allow markup + fix knobs

* cv-inline-notification-notes.md add href="#"

* cv-toast-notification-notes.md add href="#"

* cv-inline-notification-story.js add href="#"

* cv-toast-notification-story.js add href="#"

Co-authored-by: Jack Mason <jack.mason1@ibm.com>
  • Loading branch information
mrsideshowjack and Jack Mason committed Oct 2, 2020
1 parent 4bbcceb commit 44f1b61
Show file tree
Hide file tree
Showing 6 changed files with 16 additions and 10 deletions.
Expand Up @@ -10,7 +10,7 @@ http://www.carbondesignsystem.com/components/notification/code
<cv-inline-notification
kind="error"
title="notification title"
sub-title="a subtitle"
sub-title="a <a href="#">subtitle</a>"
@close="actionClose"
></cv-inline-notification>
```
Expand All @@ -19,7 +19,7 @@ http://www.carbondesignsystem.com/components/notification/code

- kind: 'error', 'info', 'success', 'warning'
- title: 'title'
- sub-title: 'subtitle'
- sub-title: 'subtitle' inputs as an `v-html` so any markup is rendered.
- actionLabel: optional action button label, without it no action button is displayed.
- closeAriaLabel: { type: String, default: 'Clear filter' },
- lowContrast: Boolean to use a lower contrast version of the notification
Expand Down
Expand Up @@ -17,7 +17,7 @@
<component :is="icon" :class="`${carbonPrefix}--inline-notification__icon`" />
<div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
<p :class="`${carbonPrefix}--inline-notification__title`">{{ title }}</p>
<p :class="`${carbonPrefix}--inline-notification__subtitle`">{{ subTitle }}</p>
<p :class="`${carbonPrefix}--inline-notification__subtitle`" v-html="subTitle"></p>
</div>
</div>
<button
Expand Down
Expand Up @@ -10,7 +10,7 @@ http://www.carbondesignsystem.com/components/notification/code
<cv-toast-notification
kind="success"
title="notification title"
sub-title="a subtitle"
sub-title="a <a href="#">subtitle</a>"
caption="Time stamp [00:00:00]"
@close="actionClose"
></cv-toast-notification>
Expand All @@ -20,8 +20,8 @@ http://www.carbondesignsystem.com/components/notification/code

- kind: 'error', 'info', 'success', 'warning'
- title: 'title'
- subtitle: 'subtitle'
- caption: 'caption'
- subtitle: 'subtitle' inputs as an `v-html` so any markup is rendered.
- caption: 'caption' inputs as an `v-html` so any markup is rendered.
- closeAriaLabel: { type: String, default: 'Clear filter' },
- lowContrast: Boolean to use a lower contrast version of the notification

Expand Down
Expand Up @@ -13,8 +13,8 @@
<component :is="icon" :class="`${carbonPrefix}--toast-notification__icon`" />
<div :class="`${carbonPrefix}--toast-notification__details`">
<h3 :class="`${carbonPrefix}--toast-notification__title`">{{ title }}</h3>
<p :class="`${carbonPrefix}--toast-notification__subtitle`">{{ subTitle }}</p>
<p :class="`${carbonPrefix}--toast-notification__caption`">{{ caption }}</p>
<p :class="`${carbonPrefix}--toast-notification__subtitle`" v-html="subTitle"></p>
<p :class="`${carbonPrefix}--toast-notification__caption`" v-html="caption"></p>
</div>
<button
:aria-label="closeAriaLabel"
Expand Down
5 changes: 4 additions & 1 deletion storybook/stories/cv-inline-notification-story.js
Expand Up @@ -25,7 +25,7 @@ const preKnobs = {
type: text,
config: [
'subtitle',
'Lorem ipsum dolor sit amet, consectetur adipisicing elit, seed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
'Lorem ipsum dolor sit amet, <a href="#">consectetur adipisicing elit</a>, seed do eiusmod tempor <strong>incididunt ut labore</strong> et dolore magna aliqua.',
], // consts.CONTENT], // fails when used with number in storybook 4.1.4
prop: 'sub-title',
},
Expand Down Expand Up @@ -114,6 +114,9 @@ for (const story of storySet) {
},
{
notes: { markdown: CvInlineNotificationNotesMD },
knobs: {
escapeHTML: false,
},
}
);
}
5 changes: 4 additions & 1 deletion storybook/stories/cv-toast-notification-story.js
Expand Up @@ -29,7 +29,7 @@ const preKnobs = {
caption: {
group: 'attr',
type: text,
config: ['caption', 'Time stamp [00:00:00]'], // consts.CONTENT], // fails when used with number in storybook 4.1.4
config: ['caption', 'Time stamp <a href="#">[00:00:00]</a>'], // consts.CONTENT], // fails when used with number in storybook 4.1.4
prop: 'caption',
},
events: {
Expand Down Expand Up @@ -109,6 +109,9 @@ for (const story of storySet) {
},
{
notes: { markdown: CvToastNotificationNotesMD },
knobs: {
escapeHTML: false,
},
}
);
}

0 comments on commit 44f1b61

Please sign in to comment.