Skip to content

Commit 55346a1

Browse files
satefansatefan
authored
Merge pull request #162 from swiss/bugfix/CHGOV-3104-notificationheader-alignment
fix(CHGOV-3104): fix notification with title
2 parents 2f0422a + b4c386e commit 55346a1

6 files changed

Lines changed: 5352 additions & 3581 deletions

File tree

‎app/components/ch/components/Notification.vue‎

Lines changed: 23 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,17 @@
1+
<!-- eslint-disable vue/no-v-text-v-html-on-component -->
12
<template>
23
<div v-if="!isClosed" :class="classes">
3-
<SvgIcon v-if="icon" :icon="icon" class="notification__icon" />
4+
<SvgIcon v-if="icon && !title" :icon="icon" class="notification__icon" />
5+
<div v-if="title" class="notification__header">
6+
<SvgIcon v-if="icon" :icon="icon" class="notification__icon" />
7+
<component
8+
:is="heading"
9+
v-if="title"
10+
:class="heading"
11+
class="notification__title"
12+
v-html="title"
13+
/>
14+
</div>
415
<div class="notification__content" v-html="text" />
516
<button
617
v-if="closeBtn"
@@ -14,8 +25,8 @@
1425
</template>
1526

1627
<script setup lang="ts">
17-
import SvgIcon from '../components/SvgIcon.vue'
1828
import { computed } from 'vue'
29+
import SvgIcon from '../components/SvgIcon.vue'
1930
2031
const isClosed = defineModel('isClosed', {
2132
type: Boolean,
@@ -42,11 +53,21 @@ const props = defineProps({
4253
type: Boolean,
4354
default: () => true,
4455
},
56+
heading: {
57+
type: String,
58+
default: 'h2',
59+
validator: (prop) => ['h2', 'h3', 'h4', 'h5'].includes(prop as string),
60+
},
61+
title: {
62+
type: String,
63+
default: undefined,
64+
},
4565
})
4666
4767
const classes = computed(() => {
4868
let base = 'notification '
4969
if (props.type) base += `notification--${props.type} `
70+
if (props.title) base += 'notification--with-title '
5071
return base
5172
})
5273
</script>

‎app/components/stories/components/Notification.stories.js‎

Lines changed: 55 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,10 @@ export default {
1616
options: ['info', 'warning', 'error', 'success', 'alert', 'hint'],
1717
control: { type: 'select' },
1818
},
19+
heading: {
20+
options: ['h2', 'h3', 'h4', 'h5'],
21+
control: { type: 'select' },
22+
},
1923
icon: {
2024
options: [
2125
'InfoCircle',
@@ -35,6 +39,8 @@ export const Example = {
3539
type: 'info',
3640
icon: 'InfoCircle',
3741
text: '<p>This is a notification with an <a href="#" target="_blank"> external link</a>.</p>',
42+
title: 'Notification Title',
43+
heading: 'h2',
3844
closeBtn: true,
3945
isClosed: false,
4046
},
@@ -136,14 +142,62 @@ export const ComplexContent = {
136142
render: () => ({
137143
template: `
138144
<div>
145+
<div class="notification notification--info">
146+
<svg viewBox="0 0 24 24" class="notification__icon">
147+
<path d="m11.8042 10.05464h1.24121v7.26074h-1.24121z" />
148+
<path d="m12.43506 7.41108a.69272.69272 0 0 0 -.54688.208.74063.74063 0 0 0 -.18457.50977.71511.71511 0 0 0 .18457.50293.70351.70351 0 0 0 .54688.20214.6722.6722 0 0 0 .73779-.70507.73376.73376 0 0 0 -.1875-.50977.70459.70459 0 0 0 -.55029-.208z" />
149+
<path d="m12.375 4.079a8.29151 8.29151 0 1 0 8.291 8.292 8.30132 8.30132 0 0 0 -8.291-8.292zm0 15.833a7.54151 7.54151 0 1 1 7.5415-7.541 7.55 7.55 0 0 1 -7.5415 7.54106z" />
150+
</svg>
151+
<div class="notification__content">
152+
<h2 class="font--bold h2">Brand new!</h2>
153+
<p>A new software update is available.</p>
154+
<p>
155+
<a class="link" href="javascript:void(0)">
156+
Discover the new version
157+
</a>
158+
</p>
159+
</div>
160+
</div>
161+
<div class="notification notification--info">
162+
<svg viewBox="0 0 24 24" class="notification__icon">
163+
<path d="m11.8042 10.05464h1.24121v7.26074h-1.24121z" />
164+
<path d="m12.43506 7.41108a.69272.69272 0 0 0 -.54688.208.74063.74063 0 0 0 -.18457.50977.71511.71511 0 0 0 .18457.50293.70351.70351 0 0 0 .54688.20214.6722.6722 0 0 0 .73779-.70507.73376.73376 0 0 0 -.1875-.50977.70459.70459 0 0 0 -.55029-.208z" />
165+
<path d="m12.375 4.079a8.29151 8.29151 0 1 0 8.291 8.292 8.30132 8.30132 0 0 0 -8.291-8.292zm0 15.833a7.54151 7.54151 0 1 1 7.5415-7.541 7.55 7.55 0 0 1 -7.5415 7.54106z" />
166+
</svg>
167+
<div class="notification__content">
168+
<h3 class="font--bold h3">Brand new!</h3>
169+
<p>A new software update is available.</p>
170+
<p>
171+
<a class="link" href="javascript:void(0)">
172+
Discover the new version
173+
</a>
174+
</p>
175+
</div>
176+
</div>
177+
<div class="notification notification--info">
178+
<svg viewBox="0 0 24 24" class="notification__icon">
179+
<path d="m11.8042 10.05464h1.24121v7.26074h-1.24121z" />
180+
<path d="m12.43506 7.41108a.69272.69272 0 0 0 -.54688.208.74063.74063 0 0 0 -.18457.50977.71511.71511 0 0 0 .18457.50293.70351.70351 0 0 0 .54688.20214.6722.6722 0 0 0 .73779-.70507.73376.73376 0 0 0 -.1875-.50977.70459.70459 0 0 0 -.55029-.208z" />
181+
<path d="m12.375 4.079a8.29151 8.29151 0 1 0 8.291 8.292 8.30132 8.30132 0 0 0 -8.291-8.292zm0 15.833a7.54151 7.54151 0 1 1 7.5415-7.541 7.55 7.55 0 0 1 -7.5415 7.54106z" />
182+
</svg>
183+
<div class="notification__content">
184+
<h4 class="font--bold h4">Brand new!</h4>
185+
<p>A new software update is available.</p>
186+
<p>
187+
<a class="link" href="javascript:void(0)">
188+
Discover the new version
189+
</a>
190+
</p>
191+
</div>
192+
</div>
139193
<div class="notification notification--info">
140194
<svg viewBox="0 0 24 24" class="notification__icon">
141195
<path d="m11.8042 10.05464h1.24121v7.26074h-1.24121z" />
142196
<path d="m12.43506 7.41108a.69272.69272 0 0 0 -.54688.208.74063.74063 0 0 0 -.18457.50977.71511.71511 0 0 0 .18457.50293.70351.70351 0 0 0 .54688.20214.6722.6722 0 0 0 .73779-.70507.73376.73376 0 0 0 -.1875-.50977.70459.70459 0 0 0 -.55029-.208z" />
143197
<path d="m12.375 4.079a8.29151 8.29151 0 1 0 8.291 8.292 8.30132 8.30132 0 0 0 -8.291-8.292zm0 15.833a7.54151 7.54151 0 1 1 7.5415-7.541 7.55 7.55 0 0 1 -7.5415 7.54106z" />
144198
</svg>
145199
<div class="notification__content">
146-
<h6 class="font--bold">Brand new!</h6>
200+
<h5 class="font--bold h5">Brand new!</h5>
147201
<p>A new software update is available.</p>
148202
<p>
149203
<a class="link" href="javascript:void(0)">

0 commit comments

Comments
 (0)