@muenchen/muc-patternlab-vue 1.6.0 → 1.7.1

package/README.md

@@ -1,6 +1,8 @@
-![logo-footer-muenchen-de.svg](docs/images/logo-footer-muenchen-de.svg)
+<p align="center">
+    <img height="140" src="docs/images/muc-patternlab.png" />
+</p>
 
-<p>
+<p align="center">
 	<a href="https://github.com/it-at-m/muc-patternlab-vue/actions/workflows/build.yaml?query=branch%3Amain">
 		<img src="https://img.shields.io/github/actions/workflow/status/it-at-m/muc-patternlab-vue/build.yaml"
 			 alt="Build Status">
@@ -17,6 +19,7 @@
 
 # muc-patternlab-vue
 
+
 This repository contains a ready-to-use Vue-Components-Library based
 on [munich.de's MDE5 Patternlab](https://patternlab.muenchen.space/).
 

package/dist/assets/temporary/custom-style.css

@@ -16,4 +16,56 @@
     background-color: #fff;
     -webkit-text-size-adjust: 100%;
     -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
+}
+
+h1 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1.875rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+h2 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1.5rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+h3 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1.25rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+h4 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1.125rem;
+    font-weight: 700;
+    line-height: 1.25;
+}
+h5 {
+    font-family: "Roboto Condensed",Arial,sans-serif;
+    font-size: 1rem;
+    font-weight: 700;
+    line-height: 1.5;
+}
+
+@media all and (min-width:1200px) {
+    h1 {
+        font-size: 2.375rem;
+    }
+    h2 {
+        font-size: 1.75rem;
+    }
+    h3 {
+        font-size: 1.5rem;
+    }
+    h4 {
+        font-size: 1.25rem;
+    }
+}
+
+.muc-divider {
+    align-self: stretch;
+    height: 0;
+    border: 1px var(--color-neutrals-blue) solid;
 }

package/dist/components/Card/MucCard.stories.d.ts

@@ -0,0 +1,165 @@
+declare const _default: {
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+            title: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+            tagline: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }>> & {
+            onClick?: ((click: Event) => any) | undefined;
+        }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: (click: Event) => void;
+        }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+            title: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+            tagline: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }>> & {
+            onClick?: ((click: Event) => any) | undefined;
+        }, {}, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{
+            title: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+            tagline: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }>> & {
+            onClick?: ((click: Event) => any) | undefined;
+        }, {}, {}, {}, {}, {}>;
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+        title: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+        tagline: {
+            type: import('vue').PropType<string>;
+            required: true;
+        };
+    }>> & {
+        onClick?: ((click: Event) => any) | undefined;
+    }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+        click: (click: Event) => void;
+    }, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            headerPrefix(): any;
+            content(): any;
+        }> & {
+            headerPrefix(): any;
+            content(): any;
+        };
+    });
+    title: string;
+    tags: string[];
+    args: {
+        onClick: import('@vitest/spy').Mock<any, any>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Default: {
+    args: {
+        title: string;
+        tagline: string;
+        content: string;
+    };
+};
+export declare const WithHeaderPrefix: () => {
+    components: {
+        MucCard: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+                title: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+                tagline: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+            }>> & {
+                onClick?: ((click: Event) => any) | undefined;
+            }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                click: (click: Event) => void;
+            }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+                title: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+                tagline: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+            }>> & {
+                onClick?: ((click: Event) => any) | undefined;
+            }, {}, true, {}, {}, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import('vue').ExtractPropTypes<{
+                title: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+                tagline: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+            }>> & {
+                onClick?: ((click: Event) => any) | undefined;
+            }, {}, {}, {}, {}, {}>;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+        } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+            title: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+            tagline: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }>> & {
+            onClick?: ((click: Event) => any) | undefined;
+        }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: (click: Event) => void;
+        }, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: Readonly<{
+                headerPrefix(): any;
+                content(): any;
+            }> & {
+                headerPrefix(): any;
+                content(): any;
+            };
+        });
+    };
+    template: string;
+};

package/dist/components/Card/MucCard.vue.d.ts

@@ -0,0 +1,44 @@
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    tagline: string;
+}>, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    click: (click: Event) => void;
+}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<__VLS_TypePropsToRuntimeProps<{
+    title: string;
+    tagline: string;
+}>>> & {
+    onClick?: ((click: Event) => any) | undefined;
+}, {}, {}>, Readonly<{
+    /**
+     * Icon shown above the callout. Defaults to icons matching the type.
+     */
+    headerPrefix(): any;
+    /**
+     * Content beneath the heading shown as text.
+     */
+    content(): any;
+}> & {
+    /**
+     * Icon shown above the callout. Defaults to icons matching the type.
+     */
+    headerPrefix(): any;
+    /**
+     * Content beneath the heading shown as text.
+     */
+    content(): any;
+}>;
+export default _default;
+type __VLS_NonUndefinedable<T> = T extends undefined ? never : T;
+type __VLS_TypePropsToRuntimeProps<T> = {
+    [K in keyof T]-?: {} extends Pick<T, K> ? {
+        type: import('vue').PropType<__VLS_NonUndefinedable<T[K]>>;
+    } : {
+        type: import('vue').PropType<T[K]>;
+        required: true;
+    };
+};
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Card/MucCardContainer.stories.d.ts

@@ -0,0 +1,148 @@
+declare const _default: {
+    components: {
+        MucCardContainer: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, {}, true, {}, {}, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, {}>;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+        } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: Readonly<{
+                default(): any;
+            }> & {
+                default(): any;
+            };
+        });
+    };
+    component: {
+        new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, {}, true, {}, {}, {
+            P: {};
+            B: {};
+            D: {};
+            C: {};
+            M: {};
+            Defaults: {};
+        }, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, {}>;
+        __isFragment?: undefined;
+        __isTeleport?: undefined;
+        __isSuspense?: undefined;
+    } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+        $slots: Readonly<{
+            default(): any;
+        }> & {
+            default(): any;
+        };
+    });
+    title: string;
+    tags: string[];
+    args: {
+        onClick: import('@vitest/spy').Mock<any, any>;
+    };
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default _default;
+export declare const Template: () => {
+    components: {
+        MucCardContainer: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{}>>, {}, true, {}, {}, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, {}>;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+        } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: Readonly<{
+                default(): any;
+            }> & {
+                default(): any;
+            };
+        });
+        MucCard: {
+            new (...args: any[]): import('vue').CreateComponentPublicInstance<Readonly<import('vue').ExtractPropTypes<{
+                title: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+                tagline: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+            }>> & {
+                onClick?: ((click: Event) => any) | undefined;
+            }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+                click: (click: Event) => void;
+            }, import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & Readonly<import('vue').ExtractPropTypes<{
+                title: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+                tagline: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+            }>> & {
+                onClick?: ((click: Event) => any) | undefined;
+            }, {}, true, {}, {}, {
+                P: {};
+                B: {};
+                D: {};
+                C: {};
+                M: {};
+                Defaults: {};
+            }, Readonly<import('vue').ExtractPropTypes<{
+                title: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+                tagline: {
+                    type: import('vue').PropType<string>;
+                    required: true;
+                };
+            }>> & {
+                onClick?: ((click: Event) => any) | undefined;
+            }, {}, {}, {}, {}, {}>;
+            __isFragment?: undefined;
+            __isTeleport?: undefined;
+            __isSuspense?: undefined;
+        } & import('vue').ComponentOptionsBase<Readonly<import('vue').ExtractPropTypes<{
+            title: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+            tagline: {
+                type: import('vue').PropType<string>;
+                required: true;
+            };
+        }>> & {
+            onClick?: ((click: Event) => any) | undefined;
+        }, {}, unknown, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+            click: (click: Event) => void;
+        }, string, {}, {}, string, {}> & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps & (new () => {
+            $slots: Readonly<{
+                headerPrefix(): any;
+                content(): any;
+            }> & {
+                headerPrefix(): any;
+                content(): any;
+            };
+        });
+    };
+    template: string;
+};

package/dist/components/Card/MucCardContainer.vue.d.ts

@@ -0,0 +1,17 @@
+declare const _default: __VLS_WithTemplateSlots<import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{}>>, {}, {}>, Readonly<{
+    /**
+     * MucCards can be put into this slot.
+     */
+    default(): any;
+}> & {
+    /**
+     * MucCards can be put into this slot.
+     */
+    default(): any;
+}>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};

package/dist/components/Card/index.d.ts

@@ -0,0 +1,4 @@
+import { default as MucCard } from './MucCard.vue';
+import { default as MucCardContainer } from './MucCardContainer.vue';
+
+export { MucCard, MucCardContainer };

package/dist/components/index.d.ts

@@ -1,7 +1,8 @@
 import { MucBanner } from './Banner';
 import { MucButton } from './Button';
 import { MucCallout } from './Callout';
+import { MucCard, MucCardContainer } from './Card';
 import { MucComment, MucCommentText } from './Comment/';
 import { MucIntro } from './Intro';
 
-export { MucButton, MucBanner, MucIntro, MucCallout, MucComment, MucCommentText, };
+export { MucButton, MucBanner, MucIntro, MucCallout, MucCard, MucCardContainer, MucComment, MucCommentText, };