import { computed, ref } from "vue";
+import { MucIcon } from "../Icon";
import { BusinessHourType } from "./BusinessHourType";
const LOCALES = "de-DE";
diff --git a/src/components/Button/MucButton.vue b/src/components/Button/MucButton.vue
index a3a19782..bfe32830 100644
--- a/src/components/Button/MucButton.vue
+++ b/src/components/Button/MucButton.vue
@@ -7,13 +7,11 @@
>
-
+ />
@@ -21,6 +19,8 @@
diff --git a/src/components/Form/MucCheckboxGroup.stories.ts b/src/components/Form/MucCheckboxGroup.stories.ts
new file mode 100644
index 00000000..3bcbbfc0
--- /dev/null
+++ b/src/components/Form/MucCheckboxGroup.stories.ts
@@ -0,0 +1,43 @@
+import MucCheckbox from "./MucCheckbox.vue";
+import MucCheckboxGroup from "./MucCheckboxGroup.vue";
+
+export default {
+ components: { MucCheckboxGroup, MucCheckbox },
+ component: MucCheckboxGroup,
+ title: "Forms/MucCheckboxGroup",
+ tags: ["autodocs"],
+ parameters: {
+ docs: {
+ description: {
+ component: `The MucCheckboxGroup component is a wrapper designed to group multiple MucCheckBox components together, allowing users to select multiple options from a set.
+
+[๐ Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-checkboxes-collapse)`,
+ },
+ },
+ },
+};
+
+export const NotCollapsable = () => ({
+ components: { MucCheckbox, MucCheckboxGroup },
+ template: `
+
+
+
+
+
+ `,
+});
+
+export const Collapsable = () => ({
+ components: { MucCheckbox, MucCheckboxGroup },
+ template: `
+
+
+
+
+
+
+
+
+ `,
+});
diff --git a/src/components/Form/MucCheckboxGroup.vue b/src/components/Form/MucCheckboxGroup.vue
new file mode 100644
index 00000000..4baec2ce
--- /dev/null
+++ b/src/components/Form/MucCheckboxGroup.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
diff --git a/src/components/Form/MucErrorList.stories.ts b/src/components/Form/MucErrorList.stories.ts
new file mode 100644
index 00000000..01afa119
--- /dev/null
+++ b/src/components/Form/MucErrorList.stories.ts
@@ -0,0 +1,31 @@
+import MucErrorList from "./MucErrorList.vue";
+
+export default {
+ component: MucErrorList,
+ title: "Forms/MucErrorList",
+ tags: ["autodocs"],
+ parameters: {
+ docs: {
+ description: {
+ component: `Simple display of one or more errors as a list.
+
+[๐ Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-error-list)
+`,
+ },
+ },
+ },
+};
+
+export const Default = {
+ args: {
+ title: "A problem occurred!",
+ errors: "Only one error line",
+ },
+};
+
+export const Multiple = {
+ args: {
+ title: "A problem occurred!",
+ errors: ["Error 1", "Error 2", "Error 3", "Error 4"],
+ },
+};
diff --git a/src/components/Form/MucErrorList.vue b/src/components/Form/MucErrorList.vue
new file mode 100644
index 00000000..79e4b8f9
--- /dev/null
+++ b/src/components/Form/MucErrorList.vue
@@ -0,0 +1,34 @@
+
+
+
+
+
diff --git a/src/components/Form/MucInput.stories.ts b/src/components/Form/MucInput.stories.ts
new file mode 100644
index 00000000..d2451d9a
--- /dev/null
+++ b/src/components/Form/MucInput.stories.ts
@@ -0,0 +1,90 @@
+import MucInput from "./MucInput.vue";
+
+export default {
+ component: MucInput,
+ title: "Forms/MucInput",
+ tags: ["autodocs"],
+ parameters: {
+ docs: {
+ description: {
+ component: `The MucInput component is a text-based input field.
+ Various types are allowed e.g. datepicker or password.
+ It supports various styling options like prefixes /suffixes, buttons and can also be displayed as a textarea.
+
+[๐ Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-input-text)
+`,
+ },
+ },
+ },
+};
+
+export const Default = {
+ args: {
+ placeholder: "Please type here",
+ },
+};
+
+export const HintAndLabel = {
+ args: {
+ ...Default.args,
+ hint: "This is a hint",
+ label: "This is a label",
+ },
+};
+
+export const Password = {
+ args: {
+ ...Default.args,
+ type: "password",
+ modelValue: "password",
+ hint: "The input text is 'password'",
+ },
+};
+
+export const Error = {
+ args: {
+ ...Default.args,
+ errorMsg: "Oops, an error occurred",
+ hint: "An error message triggers the error state",
+ },
+};
+
+export const Prefix = {
+ args: {
+ ...Default.args,
+ prefix: "Prefix",
+ },
+};
+
+export const SuffixIcon = {
+ args: {
+ ...Default.args,
+ suffixIcon: "search",
+ },
+};
+
+export const Search = {
+ args: {
+ ...Default.args,
+ type: "search",
+ datalist: ["chocolate", "coconut", "vanilla", "mint"],
+ },
+};
+
+export const Color = {
+ args: {
+ type: "color",
+ },
+};
+
+export const Date = {
+ args: {
+ type: "date",
+ },
+};
+
+export const Datetime_Local = {
+ args: {
+ type: "datetime-local",
+ },
+};
diff --git a/src/components/Form/MucInput.vue b/src/components/Form/MucInput.vue
new file mode 100644
index 00000000..ce57a794
--- /dev/null
+++ b/src/components/Form/MucInput.vue
@@ -0,0 +1,198 @@
+
+
+
+
+
diff --git a/src/components/Form/MucRadioButton.stories.ts b/src/components/Form/MucRadioButton.stories.ts
new file mode 100644
index 00000000..3d962d69
--- /dev/null
+++ b/src/components/Form/MucRadioButton.stories.ts
@@ -0,0 +1,32 @@
+import MucRadioButton from "./MucRadioButton.vue";
+import MucRadioButtonGroup from "./MucRadioButtonGroup.vue";
+
+export default {
+ component: MucRadioButton,
+ title: "Forms/RadioButton",
+ tags: ["autodocs"],
+ parameters: {
+ docs: {
+ description: {
+ component: `
+Offers simple functionality of a radio-button.
+You need to use the radio-button within the radio-button-group - combined you can provide grouping functionality to allow users to select from a predefined set of options.
+
+[๐ Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-radios)
+`,
+ },
+ },
+ },
+};
+
+export const Default = () => ({
+ components: { MucRadioButton, MucRadioButtonGroup },
+ template: `
+
+
+
+
+
+
+ `,
+});
diff --git a/src/components/Form/MucRadioButton.vue b/src/components/Form/MucRadioButton.vue
new file mode 100644
index 00000000..fe0b8d60
--- /dev/null
+++ b/src/components/Form/MucRadioButton.vue
@@ -0,0 +1,81 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/Form/MucRadioButtonGroup.vue b/src/components/Form/MucRadioButtonGroup.vue
new file mode 100644
index 00000000..e96a87e7
--- /dev/null
+++ b/src/components/Form/MucRadioButtonGroup.vue
@@ -0,0 +1,62 @@
+
+
+
+
+
diff --git a/src/components/Form/MucSelect.stories.ts b/src/components/Form/MucSelect.stories.ts
new file mode 100644
index 00000000..65b7e2d5
--- /dev/null
+++ b/src/components/Form/MucSelect.stories.ts
@@ -0,0 +1,34 @@
+import MucSelect from "./MucSelect.vue";
+
+export default {
+ component: MucSelect,
+ title: "Forms/MucSelect",
+ tags: ["autodocs"],
+ parameters: {
+ docs: {
+ description: {
+ component: `Choose from an option from a given list - multiple can also be allowed. The design is similar to the text input with autocompletion.
+
+[๐ Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-combobox)
+`,
+ },
+ },
+ },
+};
+
+export const Default = {
+ args: {
+ modelValue: "Option 1",
+ items: ["Option 1", "Option 2", "Option 3", "Option 4"],
+ label: "This is a label",
+ hint: "This is a hint",
+ },
+};
+
+export const MultiSelect = {
+ args: {
+ ...Default.args,
+ label: "Select multiple options",
+ multiple: true,
+ },
+};
diff --git a/src/components/Form/MucSelect.vue b/src/components/Form/MucSelect.vue
new file mode 100644
index 00000000..06a4eeee
--- /dev/null
+++ b/src/components/Form/MucSelect.vue
@@ -0,0 +1,201 @@
+
+
+
+
+
+
+
diff --git a/src/components/Form/MucTextArea.stories.ts b/src/components/Form/MucTextArea.stories.ts
new file mode 100644
index 00000000..9b421186
--- /dev/null
+++ b/src/components/Form/MucTextArea.stories.ts
@@ -0,0 +1,47 @@
+import MucTextArea from "./MucTextArea.vue";
+
+export default {
+ component: MucTextArea,
+ title: "Forms/MucTextArea",
+ tags: ["autodocs"],
+ parameters: {
+ docs: {
+ description: {
+ component: `The muc-text-area component allows bigger text based inputs then the regular input. The size is adjustable.
+
+[๐ Patternlab-Docs](https://patternlab.muenchen.space/?p=elements-textarea)
+`,
+ },
+ },
+ },
+};
+
+export const Default = {
+ args: {
+ placeholder: "Write some very long text here",
+ },
+};
+
+export const Error = {
+ args: {
+ ...Default.args,
+ errorMsg: "An error occured",
+ },
+};
+
+export const Required = {
+ args: {
+ label: "Required textarea",
+ ...Default.args,
+ required: true,
+ },
+};
+
+export const BigTextArea = {
+ args: {
+ ...Default.args,
+ rows: 7,
+ label: "Big textarea",
+ hint: "Write a lot of text",
+ },
+};
diff --git a/src/components/Form/MucTextArea.vue b/src/components/Form/MucTextArea.vue
new file mode 100644
index 00000000..552eaaca
--- /dev/null
+++ b/src/components/Form/MucTextArea.vue
@@ -0,0 +1,80 @@
+
+
+
+
+
+
+
diff --git a/src/components/Form/RadioButtonTypes.ts b/src/components/Form/RadioButtonTypes.ts
new file mode 100644
index 00000000..b1146e62
--- /dev/null
+++ b/src/components/Form/RadioButtonTypes.ts
@@ -0,0 +1,41 @@
+import { InjectionKey, Ref } from "vue";
+
+/**
+ * Key for inject and provide
+ *
+ * @type {InjectionKey
}
+ */
+export const RadioButtonGroupKey: InjectionKey =
+ Symbol("mucRadioGroup");
+
+/**
+ * Type getting injected / provided
+ */
+export type RadioButtonGroupInjection = {
+ /**
+ * Function for setting the value of the current selected radiobutton
+ * @param {RadioButtonValueTypes} value - Value being set as the new current selected radiobutton
+ */
+ set: (value: RadioButtonValueTypes) => void;
+
+ /**
+ * Current value of the currently selected radiobutton
+ */
+ modelValue: Readonly>;
+
+ /**
+ * Deactivate all child radiobuttons
+ */
+ disabled: Readonly>;
+};
+
+/**
+ * Different possible types used as value for a radiobutton-values
+ */
+export type RadioButtonValueTypes =
+ | boolean
+ | string
+ | unknown[]
+ | Record
+ | number
+ | null;
diff --git a/src/components/Form/index.ts b/src/components/Form/index.ts
new file mode 100644
index 00000000..9e4cbe68
--- /dev/null
+++ b/src/components/Form/index.ts
@@ -0,0 +1,23 @@
+import MucCheckbox from "./MucCheckbox.vue";
+import MucCheckboxGroup from "./MucCheckboxGroup.vue";
+import MucErrorList from "./MucErrorList.vue";
+import MucForm from "./MucInput.vue";
+import MucInput from "./MucInput.vue";
+import MucRadioButton from "./MucRadioButton.vue";
+import MucRadioButtonGroup from "./MucRadioButtonGroup.vue";
+import MucSingleSelect from "./MucSelect.vue";
+import MucSelect from "./MucSelect.vue";
+import MucTextArea from "./MucTextArea.vue";
+
+export {
+ MucForm,
+ MucCheckbox,
+ MucCheckboxGroup,
+ MucRadioButtonGroup,
+ MucInput,
+ MucRadioButton,
+ MucTextArea,
+ MucSingleSelect,
+ MucErrorList,
+ MucSelect,
+};
diff --git a/src/components/Icon/MucIcon.vue b/src/components/Icon/MucIcon.vue
index d607e631..416ddd52 100644
--- a/src/components/Icon/MucIcon.vue
+++ b/src/components/Icon/MucIcon.vue
@@ -1,7 +1,7 @@
diff --git a/src/components/Intro/MucIntro.vue b/src/components/Intro/MucIntro.vue
index 2b386564..d6b58e89 100644
--- a/src/components/Intro/MucIntro.vue
+++ b/src/components/Intro/MucIntro.vue
@@ -44,11 +44,11 @@ defineSlots<{
+ />