diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 37033681..12bc4e7c 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -1,4 +1,5 @@ import "../public/assets/temporary/muenchende-style.css"; +import "../public/assets/temporary/custom-style.css"; import "../public/assets/temporary/muenchende-fontfaces.css"; /** @type { import('@storybook/vue3').Preview } */ diff --git a/docs/GettingStarted.mdx b/docs/GettingStarted.mdx index 1ac86587..828f592d 100644 --- a/docs/GettingStarted.mdx +++ b/docs/GettingStarted.mdx @@ -54,6 +54,7 @@ In your Webcomponents root you should import the MDE5-CSS and SVG-Sprite for MDE ``` diff --git a/public/assets/temporary/custom-style.css b/public/assets/temporary/custom-style.css new file mode 100644 index 00000000..da5ef837 --- /dev/null +++ b/public/assets/temporary/custom-style.css @@ -0,0 +1,71 @@ +/** + * We need this css to ensure the correct patternlab + * behaviour inside of a webcomponent. + */ +:root { + --color-brand-main-blue: #005A9F; + --color-neutrals-blue: #BDD4EA; + --color-neutrals-blue-xlight: #F2F6FA; + --color-neutrals-grey: #3A5368; + color: var(--color-neutrals-grey); + font-family: Open Sans, Arial, sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.5; + word-break: break-word; + 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; +} \ No newline at end of file diff --git a/src/components/Card/MucCard.stories.ts b/src/components/Card/MucCard.stories.ts new file mode 100644 index 00000000..0372623f --- /dev/null +++ b/src/components/Card/MucCard.stories.ts @@ -0,0 +1,55 @@ +import { fn } from "@storybook/test"; + +import MucCard from "./MucCard.vue"; + +export default { + component: MucCard, + title: "MucCard", + tags: ["autodocs"], + // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked + args: { onClick: fn() }, + parameters: { + docs: { + description: { + component: `A Card-Component in Patternlab-Style. + +Use inside [MucCardContainer](/docs/muccardcontainer--docs) for a automatically wrapping layout. + +🔗 Patternlab-Docs (not yet available) +`, + }, + }, + }, +}; + +export const Default = { + args: { + title: "Lorem Ipsum", + tagline: "Dolor", + content: + "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.", + }, +}; + +export const WithHeaderPrefix = () => ({ + components: { MucCard }, + template: ` + + + + + `, +}); diff --git a/src/components/Card/MucCard.vue b/src/components/Card/MucCard.vue new file mode 100644 index 00000000..019b42c5 --- /dev/null +++ b/src/components/Card/MucCard.vue @@ -0,0 +1,92 @@ + + + + + diff --git a/src/components/Card/MucCardContainer.stories.ts b/src/components/Card/MucCardContainer.stories.ts new file mode 100644 index 00000000..5cb5e8d5 --- /dev/null +++ b/src/components/Card/MucCardContainer.stories.ts @@ -0,0 +1,43 @@ +import { fn } from "@storybook/test"; + +import MucCard from "./MucCard.vue"; +import MucCardContainer from "./MucCardContainer.vue"; + +export default { + components: { MucCardContainer }, + component: MucCardContainer, + title: "MucCardContainer", + tags: ["autodocs"], + // 👇 Use `fn` to spy on the onClick arg, which will appear in the actions panel once invoked + args: { onClick: fn() }, + parameters: { + docs: { + description: { + component: `A wrapping Layout to use with [MucCard](/docs/muccard--docs). + +🔗 Patternlab-Docs (not yet available) +`, + }, + }, + }, +}; + +export const Template = () => ({ + components: { MucCardContainer, MucCard }, + template: ` + + + + + + `, +}); diff --git a/src/components/Card/MucCardContainer.vue b/src/components/Card/MucCardContainer.vue new file mode 100644 index 00000000..c47f496a --- /dev/null +++ b/src/components/Card/MucCardContainer.vue @@ -0,0 +1,37 @@ + + + + + diff --git a/src/components/Card/index.ts b/src/components/Card/index.ts new file mode 100644 index 00000000..ab8fdf20 --- /dev/null +++ b/src/components/Card/index.ts @@ -0,0 +1,4 @@ +import MucCard from "./MucCard.vue"; +import MucCardContainer from "./MucCardContainer.vue"; + +export { MucCard, MucCardContainer }; diff --git a/src/components/Intro/MucIntro.stories.ts b/src/components/Intro/MucIntro.stories.ts index 66cda946..4f37df6a 100644 --- a/src/components/Intro/MucIntro.stories.ts +++ b/src/components/Intro/MucIntro.stories.ts @@ -20,9 +20,18 @@ Used e.g. in https://stadt.muenchen.de/buergerservice/anliegen.html. export const Default = { args: { - title: "Intro-Title", + tagline: "Tagline", + title: "Intro with Title", + divider: true, default: "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.\n" + " Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.", }, }; + +export const Minimal = { + args: { + title: "Smaller Intro with Title", + default: Default.args.default, + }, +}; diff --git a/src/components/Intro/MucIntro.vue b/src/components/Intro/MucIntro.vue index 990318fe..aeee5d73 100644 --- a/src/components/Intro/MucIntro.vue +++ b/src/components/Intro/MucIntro.vue @@ -4,6 +4,14 @@ defineProps<{ * Title of the Intro */ title: string; + /** + * Tagline of the Intro (above the title) + */ + tagline: string; + /** + * Toggle to show a divider between title and body + */ + divider: boolean; }>(); defineSlots<{ @@ -15,18 +23,42 @@ defineSlots<{ + + diff --git a/src/components/index.ts b/src/components/index.ts index 0ac34177..c7e0f683 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -1,6 +1,7 @@ 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"; @@ -9,6 +10,8 @@ export { MucBanner, MucIntro, MucCallout, + MucCard, + MucCardContainer, MucComment, MucCommentText, };