Skip to content

Commit 23d6be2

Browse files
FabianWilmsFabianWilms
authored
Merge pull request #634 from it-at-m/632-add-accordion-component
✨ 632 add accordion component
2 parents 8f03af1 + 2d3eb47 commit 23d6be2

File tree

6 files changed

+477
-0
lines changed

6 files changed

+477
-0
lines changed

‎src/components/Accordion/MucAccordion.stories.ts‎

Lines changed: 161 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,161 @@
1+
import MucAccordion from "./MucAccordion.vue";
2+
import MucAccordionItem from "./MucAccordionItem.vue";
3+
4+
export default {
5+
components: { MucAccordion },
6+
component: MucAccordion,
7+
title: "Accordion/MucAccordion",
8+
tags: ["autodocs"],
9+
parameters: {
10+
docs: {
11+
description: {
12+
component: `The \`muc-accordion\` component offers the option of displaying content clearly in an accordion format. <br> A template with the following v-slot must be placed around the MucAccordionItems \`v-slot:default=“{onOpen, onClose, activeItems}”\`. <br> Each MucAccordionItem must be passed the following parameters with exactly these values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\` . <br> For example:
13+
<template v-slot:default="{onOpen, onClose, activeItems}">
14+
<MucAccordionItem
15+
id="accordion-item-1"
16+
header="Accordion item 1"
17+
:active-items="activeItems"
18+
@open="onOpen"
19+
@close="onClose"
20+
>
21+
<template #text>
22+
Text of Accordion item 1
23+
</template>
24+
</MucAccordionItem>
25+
<MucAccordionItem
26+
id="accordion-item-2"
27+
header="Accordion item 2"
28+
:active-items="activeItems"
29+
@open="onOpen"
30+
@close="onClose"
31+
>
32+
<template #text>
33+
Text of Accordion item 2
34+
</template>
35+
</MucAccordionItem>
36+
</template>
37+
38+
39+
40+
[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-accordion)
41+
`,
42+
},
43+
},
44+
},
45+
};
46+
47+
export const Template = () => ({
48+
components: { MucAccordion, MucAccordionItem },
49+
template: `
50+
<MucAccordion
51+
id="accordion"
52+
header="Lorem ipsum dolor"
53+
defaultItem="accordion-item-1"
54+
>
55+
<template v-slot:default="{onOpen, onClose, activeItems}">
56+
<MucAccordionItem
57+
id="accordion-item-1"
58+
header="Accordion item 1"
59+
:active-items="activeItems"
60+
@open="onOpen"
61+
@close="onClose"
62+
>
63+
<template #text>
64+
Text of Accordion item 1
65+
</template>
66+
</MucAccordionItem>
67+
<MucAccordionItem
68+
id="accordion-item-2"
69+
header="Accordion item 2"
70+
:active-items="activeItems"
71+
@open="onOpen"
72+
@close="onClose"
73+
>
74+
<template #text>
75+
Text of Accordion item 2
76+
</template>
77+
</MucAccordionItem>
78+
<MucAccordionItem
79+
id="accordion-item-3"
80+
header="Accordion item 3"
81+
:active-items="activeItems"
82+
@open="onOpen"
83+
@close="onClose"
84+
>
85+
<template #text>
86+
Text of Accordion item 3
87+
</template>
88+
</MucAccordionItem>
89+
<MucAccordionItem
90+
id="accordion-item-4"
91+
header="Accordion item 4"
92+
:active-items="activeItems"
93+
@open="onOpen"
94+
@close="onClose"
95+
>
96+
<template #text>
97+
Text of Accordion item 4
98+
</template>
99+
</MucAccordionItem>
100+
</template>
101+
</MucAccordion>
102+
`,
103+
});
104+
105+
export const Multiple = () => ({
106+
components: { MucAccordion, MucAccordionItem },
107+
template: `
108+
<MucAccordion
109+
id="accordion"
110+
header="Lorem ipsum dolor"
111+
multiple
112+
>
113+
<template v-slot:default="{onOpen, onClose, activeItems}">
114+
<MucAccordionItem
115+
id="accordion-item-1"
116+
header="Accordion item 1"
117+
:active-items="activeItems"
118+
@open="onOpen"
119+
@close="onClose"
120+
>
121+
<template #text>
122+
Text of Accordion item 1
123+
</template>
124+
</MucAccordionItem>
125+
<MucAccordionItem
126+
id="accordion-item-2"
127+
header="Accordion item 2"
128+
:active-items="activeItems"
129+
@open="onOpen"
130+
@close="onClose"
131+
>
132+
<template #text>
133+
Text of Accordion item 2
134+
</template>
135+
</MucAccordionItem>
136+
<MucAccordionItem
137+
id="accordion-item-3"
138+
header="Accordion item 3"
139+
:active-items="activeItems"
140+
@open="onOpen"
141+
@close="onClose"
142+
>
143+
<template #text>
144+
Text of Accordion item 3
145+
</template>
146+
</MucAccordionItem>
147+
<MucAccordionItem
148+
id="accordion-item-4"
149+
header="Accordion item 4"
150+
:active-items="activeItems"
151+
@open="onOpen"
152+
@close="onClose"
153+
>
154+
<template #text>
155+
Text of Accordion item 4
156+
</template>
157+
</MucAccordionItem>
158+
</template>
159+
</MucAccordion>
160+
`,
161+
});

‎src/components/Accordion/MucAccordion.vue‎

Lines changed: 87 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,87 @@
1+
<template>
2+
<div class="m-component m-component-accordion">
3+
<div class="container">
4+
<div class="m-component__grid">
5+
<div class="m-component__column">
6+
<div
7+
v-if="header"
8+
class="m-component__head"
9+
>
10+
<h2 class="m-component__heading">{{ header }}</h2>
11+
<p class="m-component__summary"></p>
12+
</div>
13+
<div class="m-component__body">
14+
<div
15+
class="m-accordion"
16+
:id="id"
17+
>
18+
<slot
19+
name="default"
20+
:active-items="activeItems"
21+
:on-open="onOpen"
22+
:on-close="onClose"
23+
/>
24+
</div>
25+
</div>
26+
</div>
27+
</div>
28+
</div>
29+
</div>
30+
</template>
31+
32+
<script setup lang="ts">
33+
import { ref } from "vue";
34+
35+
const {
36+
header,
37+
multiple = false,
38+
defaultItem = undefined,
39+
} = defineProps<{
40+
/**
41+
* Id of accordion
42+
*/
43+
id: string;
44+
/**
45+
* Heading of accordion
46+
*/
47+
header?: string;
48+
/**
49+
* Multiple MucAccordionItems can be active at the same time
50+
*/
51+
multiple?: boolean;
52+
/**
53+
* Id of default active item
54+
*/
55+
defaultItem?: string;
56+
}>();
57+
58+
defineSlots<{
59+
/**
60+
* MucAccordionItems can be put into this slot.
61+
*/
62+
default(): unknown;
63+
}>();
64+
65+
/**
66+
* List of active MucAccordionItems
67+
*/
68+
const activeItems = ref<string[]>(defaultItem ? [defaultItem] : []);
69+
70+
/**
71+
* On open set as active Item
72+
*/
73+
const onOpen = (id: string) => {
74+
if (multiple) {
75+
activeItems.value.push(id);
76+
} else {
77+
activeItems.value = [id];
78+
}
79+
};
80+
81+
/**
82+
* On close delete from active Items
83+
*/
84+
const onClose = (id: string) => {
85+
activeItems.value = activeItems.value.filter((item) => item !== id);
86+
};
87+
</script>

‎src/components/Accordion/MucAccordionItem.stories.ts‎

Lines changed: 37 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
import MucAccordionItem from "./MucAccordionItem.vue";
2+
3+
export default {
4+
components: { MucAccordionItem },
5+
component: MucAccordionItem,
6+
title: "Accordion/MucAccordionItem",
7+
tags: ["autodocs"],
8+
parameters: {
9+
docs: {
10+
description: {
11+
component: `The \`muc-accordion-item\` component represents an item of an \`muc-accordion\` <br> Each MucAccordionItem must be passed the following parameters with exactly this values: \`:active-items="activeItems"\` \`@open="onOpen"\` \`@close="onClose"\`
12+
13+
[🔗 Patternlab-Docs](https://patternlab.muenchen.space/?p=viewall-components-accordion)
14+
`,
15+
},
16+
},
17+
},
18+
};
19+
20+
export const Template = () => ({
21+
components: { MucAccordionItem },
22+
template: `
23+
24+
<MucAccordionItem
25+
id="accordion-item-1"
26+
header="Accordion item 1"
27+
:active-items="activeItems"
28+
@open="onOpen"
29+
@close="onClose"
30+
>
31+
<template #text>
32+
Text of Accordion item 1
33+
</template>
34+
</MucAccordionItem>
35+
36+
`,
37+
});

0 commit comments

Comments
 (0)