Skip to content

Commit 8f5e910

Browse files
lehjulehju
authored
💥 Update MDE-Patternlab to 1.1.15 - please update your assets.muenchen.de URLs
💥 Update MDE-Patternlab to 1.1.15 - please update your assets.muenchen.de URLs
2 parents 1d39666 + 9786684 commit 8f5e910

File tree

6 files changed

+65
-31
lines changed

6 files changed

+65
-31
lines changed

‎.storybook/preview-head.html‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,9 @@
11
<!-- Load MDE-CSS from assets-Server -->
22
<link
33
rel="stylesheet"
4-
href="https://assets.muenchen.de/mde/1.1.6/css/fonts.css"
4+
href="https://assets.muenchen.de/mde/1.1.15/css/fonts.css"
55
/>
66
<link
77
rel="stylesheet"
8-
href="https://assets.muenchen.de/mde/1.1.6/css/style.css"
8+
href="https://assets.muenchen.de/mde/1.1.15/css/style.css"
99
/>

‎README.md‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,13 +37,14 @@ on [munich.de's MDE5 Patternlab](https://patternlab.muenchen.space/).
3737

3838
The supported MDE-Version can be taken out of the following table:
3939

40-
| muc-patternlab-vue | MDE Version |
41-
| --- | --- |
42-
| >= 6.x | [1.1.6](https://patternlab.muenchen.space/?p=documentation-changelog) |
43-
| >= 5.x | [1.0.10](https://patternlab.muenchen.space/?p=documentation-changelog) |
44-
| >= 4.x | [1.0.7](https://patternlab.muenchen.space/?p=documentation-changelog) |
45-
| >= 3.x | [1.0.6](https://patternlab.muenchen.space/?p=documentation-changelog) |
46-
| < 3.x | [1.0.4](https://patternlab.muenchen.space/?p=documentation-changelog) |
40+
| muc-patternlab-vue | MDE Version |
41+
|--------------------|------------------------------------------------------------------------|
42+
| >= 7.x | [1.1.15](https://patternlab.muenchen.space/?p=documentation-changelog) |
43+
| >= 6.x | [1.1.6](https://patternlab.muenchen.space/?p=documentation-changelog) |
44+
| >= 5.x | [1.0.10](https://patternlab.muenchen.space/?p=documentation-changelog) |
45+
| >= 4.x | [1.0.7](https://patternlab.muenchen.space/?p=documentation-changelog) |
46+
| >= 3.x | [1.0.6](https://patternlab.muenchen.space/?p=documentation-changelog) |
47+
| < 3.x | [1.0.4](https://patternlab.muenchen.space/?p=documentation-changelog) |
4748

4849
In its current state only some components exist. The library will continually grow as the need for new components grows.
4950

‎docs/GettingStarted.mdx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ In your Webcomponents root you should import the MDE5-CSS from assets.muenchen.d
4545

4646
<template>
4747
<link
48-
href="https://assets.muenchen.de/mde/1.1.6/css/style.css"
48+
href="https://assets.muenchen.de/mde/1.1.15/css/style.css"
4949
rel="stylesheet"
5050
/>
5151

‎src/components/Banner/MucBanner.stories.ts‎

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -21,34 +21,47 @@ export default {
2121
export const Default = {
2222
args: {
2323
default: "Hi, I'm an Info-Banner!",
24+
variant: "content",
2425
type: "info",
2526
},
2627
};
2728

2829
export const Success = {
2930
args: {
3031
default: "Hi, I'm a Success-Banner!",
32+
variant: "content",
3133
type: "success",
3234
},
3335
};
3436

3537
export const Warning = {
3638
args: {
3739
default: "Hi, I'm a Warning-Banner!",
40+
variant: "content",
3841
type: "warning",
3942
},
4043
};
4144

4245
export const Emergency = {
4346
args: {
4447
default: "Hi, I'm an Emergency-Banner!",
48+
variant: "content",
4549
type: "emergency",
4650
},
4751
};
4852

53+
export const Header = {
54+
args: {
55+
default: "Hi, I'm an Info-Banner!",
56+
variant: "header",
57+
type: "info",
58+
},
59+
};
60+
4961
export const NoIcon = {
5062
args: {
51-
default: "Hi, I'm an Emergency-Banner!",
63+
default: "Hi, I'm a Warning-Banner!",
64+
variant: "content",
5265
type: "warning",
5366
noIcon: true,
5467
},

‎src/components/Banner/MucBanner.test.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import MucBanner from "./MucBanner.vue";
66
describe("MucBanner.vue", () => {
77
it("renders with default type", () => {
88
const wrapper = mount(MucBanner, {
9+
props: { variant: "content" },
910
slots: {
1011
default: "This is an info message",
1112
},
@@ -20,7 +21,7 @@ describe("MucBanner.vue", () => {
2021

2122
it("renders with success type", () => {
2223
const wrapper = mount(MucBanner, {
23-
props: { type: "success" },
24+
props: { variant: "content", type: "success" },
2425
slots: {
2526
default: "This is a success message",
2627
},
@@ -35,7 +36,7 @@ describe("MucBanner.vue", () => {
3536

3637
it("renders with warning type", () => {
3738
const wrapper = mount(MucBanner, {
38-
props: { type: "warning" },
39+
props: { variant: "content", type: "warning" },
3940
slots: {
4041
default: "This is a warning message",
4142
},
@@ -50,7 +51,7 @@ describe("MucBanner.vue", () => {
5051

5152
it("renders with emergency type", () => {
5253
const wrapper = mount(MucBanner, {
53-
props: { type: "emergency" },
54+
props: { variant: "content", type: "emergency" },
5455
slots: {
5556
default: "This is an emergency message",
5657
},

‎src/components/Banner/MucBanner.vue‎

Lines changed: 36 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -4,10 +4,20 @@ import { computed } from "vue";
44
import { MucIcon } from "../Icon";
55
66
type bannerType = "info" | "success" | "warning" | "emergency";
7+
type bannerVariant = "content" | "header";
78
8-
const { type = "info", noIcon = false } = defineProps<{
9+
const {
10+
type = "info",
11+
variant,
12+
noIcon = false,
13+
} = defineProps<{
914
/**
10-
* Changes the style of the banner. Available types are `info`, `warning` and `emergency`.
15+
* Changes the style of the banner. Available types are `content` and `header`. `content` is used in the content area. `header` is used directly below the header and has more padding.
16+
*/
17+
variant: bannerVariant;
18+
19+
/**
20+
* Changes the style of the banner. Available types are `info`, `success`, `warning` and `emergency`.
1121
*/
1222
type?: bannerType;
1323
@@ -81,22 +91,31 @@ const typeIcon = computed(() => {
8191
</script>
8292

8393
<template>
84-
<div>
85-
<div>
86-
<div
87-
class="m-banner"
88-
:class="typeClass"
89-
:role="typeRole"
90-
:aria-label="typeAriaLabel"
91-
>
92-
<div>
93-
<muc-icon
94-
v-if="!noIcon"
95-
:icon="typeIcon"
96-
/>
94+
<div
95+
class="m-banner"
96+
:class="typeClass"
97+
:role="typeRole"
98+
:aria-label="typeAriaLabel"
99+
>
100+
<template v-if="variant === 'content'">
101+
<muc-icon
102+
v-if="!noIcon"
103+
:icon="typeIcon"
104+
/>
105+
<p>
106+
<slot />
107+
</p>
108+
</template>
109+
<template v-else>
110+
<div class="container-fluid">
111+
<muc-icon
112+
v-if="!noIcon"
113+
:icon="typeIcon"
114+
/>
115+
<p>
97116
<slot />
98-
</div>
117+
</p>
99118
</div>
100-
</div>
119+
</template>
101120
</div>
102121
</template>

0 commit comments

Comments
 (0)