Skip to content

Commit 4658414

Browse files
lehjulehju
committed
✨ add MucAccordion component
1 parent c942109 commit 4658414

File tree

6 files changed

+454
-0
lines changed

6 files changed

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