form centric

gfi-ihk-2024/stories/atoms/labelFormCentric/LabelFormCentric.stories.js

@@ -0,0 +1,29 @@
+import {createLabelFormCentric} from "./LabelFormCentricComponent";
+
+export default {
+  title: 'Atoms/Label',
+  args: {
+    text: 'Benutzername',
+    forAttribute: 'name',
+    isRequired: false,
+    labelType: 'not-set',
+  },
+  argTypes: {
+    text: {
+      name: 'Label-Text',
+    },
+    forAttribute: {
+      name: 'For-Attribute',
+    },
+    isRequired: {
+      name: 'Pflichtfeld',
+    },
+  }
+}
+
+const Template = ({...args}) => {
+  return createLabelFormCentric({...args});
+};
+
+export const LabelFormCentric = Template.bind({});
+LabelFormCentric.args = {};

gfi-ihk-2024/stories/atoms/labelFormCentric/LabelFormCentricComponent.js

@@ -0,0 +1,52 @@
+import './labelFormCentric.scss';
+import {createElement} from "../../_global/scripts/helpers";
+
+export const createLabelFormCentric = ({
+    text = 'Benutzername',
+    forAttribute = 'name',
+    isRequired = false,
+    isHidden = false,
+    labelType = 'not-set',
+}) => {
+    let labelField;
+    if (labelType === 'text') {
+        labelField = createElement('label', ['mwf-textinput__label'], text);
+        labelField.htmlFor = forAttribute;
+        if (isRequired) {
+            const asterix = createElement('span', ['mwf-textinput__required','mwf-required'], '*', labelField);
+            asterix.title = 'Pflichtfeld';
+        }
+    }
+    else if (labelType === 'checkbox') {
+        labelField = createElement('label', ['mwf-checkbox__label']);
+        labelField.htmlFor = forAttribute;
+        createElement('span', ['mwf-checkbox__text'], text, labelField);
+    }
+    else if (labelType === 'radio') {
+        labelField = createElement('label', ['mwf-radio__label']);
+        labelField.htmlFor = forAttribute;
+        createElement('span', ['mwf-radio__text'], text, labelField);
+    }
+    else if (labelType === 'select') {
+        labelField = createElement('label', ['mwf-select__label'], text);
+        labelField.htmlFor = forAttribute;
+        if (isRequired) {
+            const asterix = createElement('span', ['mwf-select__required','mwf-required'], '*', labelField);
+            asterix.title = 'Pflichtfeld';
+        }
+    }
+    else if (labelType === 'textarea') {
+        labelField = createElement('label', ['mwf-textarea__label'], text);
+        labelField.htmlFor = forAttribute;
+        if (isRequired) {
+            const asterix = createElement('span', ['mwf-textarea__required','mwf-required'], '*', labelField);
+            asterix.title = 'Pflichtfeld';
+        }
+    }
+    else {
+        labelField = createElement('label', ['mwf-textinput__label'], text);
+        labelField.htmlFor = forAttribute;
+    }
+
+    return labelField;
+}

gfi-ihk-2024/stories/atoms/labelFormCentric/labelFormCentric.scss

@@ -0,0 +1,15 @@
+label {
+  display: block;
+  font-size: var(--font-size-small);
+  font-weight: 400;
+  margin: 0;
+
+  a:hover {
+    color: var(--theme-color-link-hover);
+  }
+
+  span {
+    vertical-align: top;
+    margin-left: 0.1em;
+  }
+}

gfi-ihk-2024/stories/components/form-element-form-centric/FormElementFormCentric.stories.js

@@ -0,0 +1,70 @@
+import {createFormCentricElement} from "./FormElementFormCentricComponent";
+
+export default {
+  title: 'Components/Form Element Form Centric',
+  args: {
+    inputType: 'text',
+  },
+  argTypes: {
+    inputType: {
+      control: 'select',
+      options: ['text', 'checkbox', 'radio', 'select', 'password', 'textarea'],
+    }
+  }
+}
+
+const Template = ({...args}) => {
+  return createFormCentricElement({...args});
+};
+
+export const TextFormCentricElement = Template.bind({});
+TextFormCentricElement.args = {
+  inputType: 'text',
+  isRequired: true,
+  placeholder: 'Platzhalter',
+};
+
+export const CheckboxFormCentricElement = Template.bind({});
+CheckboxFormCentricElement.args = {
+  inputType: 'checkbox',
+  isRequired: true,
+  label: 'Ich akzeptiere die <a href="#">Datenschutzbestimmungen</a>.',
+};
+
+export const RadioFormCentricElement = Template.bind({});
+RadioFormCentricElement.args = {
+  inputType: 'radio',
+  isRequired: true,
+  label: 'Option 1',
+  id: 'option1',
+  label2: 'Option 2',
+  id2: 'option2'
+};
+
+export const SelectFormCentricElement = Template.bind({});
+SelectFormCentricElement.args = {
+  inputType: 'select',
+  label: 'Auswahl',
+  isRequired: true,
+};
+
+export const TextareaFormCentricElement = Template.bind({});
+TextareaFormCentricElement.args = {
+  inputType: 'textarea',
+  placeholder: 'Platzhalter',
+  label: 'Ihre Nachricht',
+  isRequired: true,
+};
+
+export const CheckboxGroupFormCentricElement = Template.bind({});
+CheckboxGroupFormCentricElement.args = {
+  inputType: 'checkboxGroup',
+  isRequired: true,
+  label: 'Ich akzeptiere die <a href="#">Datenschutzbestimmungen</a>.',
+};
+
+export const FileFormCentricElement = Template.bind({});
+FileFormCentricElement.args = {
+  inputType: 'file',
+  isRequired: true,
+};

gfi-ihk-2024/stories/components/form-element-form-centric/FormElementFormCentricComponent.js

@@ -0,0 +1,203 @@
+import './form-element-form-centric.scss';
+import {createElement} from "../../_global/scripts/helpers";
+import {createLabelFormCentric} from "../../atoms/labelFormCentric/LabelFormCentricComponent";
+import {createInputCheckboxRadio} from "../../atoms/input-checkbox-radio/InputCheckboxRadioComponent";
+import {createInputText} from "../../atoms/input-text/InputTextComponent";
+import {createInputSelect} from "../../atoms/input-select/InputSelectComponent";
+import {InputSelectData} from "../../atoms/input-select/InputSelectData";
+
+export const createFormCentricElement = ({
+  wrapperClasses = 'form-element-form-centric',
+  name = 'name',
+  id = null,
+  id2 = null,
+  inputType = 'text',
+  isRequired = false,
+  placeholder = '',
+  label = 'Benutzername',
+  label2 = 'Benutzername',
+  selectOptions = [],
+}) => {
+  const wrapper = createElement('div', wrapperClasses.split(' '));
+  if (!id || id.length === 0) {
+    id = name;
+  }
+
+  if (inputType === 'text') {
+    const textInput = createElement('div', ['mwf-textinput'], null, wrapper);
+
+    textInput.appendChild(createInputText({
+      placeholder: placeholder,
+      isRequired: isRequired,
+      name: name,
+      id: id,
+      type: inputType,
+      classes: 'mwf-textinput__input'
+    }));
+    textInput.appendChild(createLabelFormCentric({
+      forAttribute: id,
+      isRequired: isRequired,
+      text: label,
+      labelType: 'text',
+    }));
+    const hint = createElement('div', ['mwf-textinput__hint'], null, textInput);
+    createElement('p', [], 'Bitte tragen Sie hier ihren Vornamen ein.', hint);
+    createElement('div', ['mwf-textinput__error'], 'Dieses Feld darf nicht leer sein.', textInput);
+  }
+
+  if (inputType === 'checkbox') {
+    const checkboxFieldset = createElement('fieldset', ['mwf-checkboxgroup'], null, wrapper);
+    createElement('legend', ['mwf-checkboxgroup__legend'], 'Legend Header', checkboxFieldset);
+    createElement('div', ['mwf-checkboxgroup__error'], 'Dieses Feld darf nicht leer sein.', checkboxFieldset);
+    const checkboxGroup = createElement('div', ['mwf-checkboxgroup__options'], null, checkboxFieldset);
+    const checkbox = createElement('div', ['mwf-checkbox'], null, checkboxGroup);
+    checkbox.appendChild(createInputCheckboxRadio({
+      type: inputType,
+      isRequired: isRequired,
+      name: name,
+      id: id,
+      classes: 'mwf-checkbox__input'
+    }));
+    checkbox.appendChild(createLabelFormCentric({
+      forAttribute: id,
+      isRequired: isRequired,
+      text: label,
+      labelType: 'checkbox',
+    }));
+  }
+
+  if (inputType === 'radio') {
+    const checkboxFieldset = createElement('fieldset', ['mwf-radiogroup'], null, wrapper);
+    createElement('legend', ['mwf-radiogroup__legend'], 'Legend Header', checkboxFieldset);
+    createElement('div', ['mwf-radiogroup__error'], 'Dieses Feld darf nicht leer sein.', checkboxFieldset);
+    const checkboxGroup = createElement('div', ['mwf-radiogroup__options'], null, checkboxFieldset);
+    const checkbox = createElement('div', ['mwf-radio'], null, checkboxGroup);
+    checkbox.appendChild(createInputCheckboxRadio({
+      type: inputType,
+      isRequired: isRequired,
+      name: name,
+      id: id,
+      classes: 'mwf-radio__input'
+    }));
+    checkbox.appendChild(createLabelFormCentric({
+      forAttribute: id,
+      isRequired: isRequired,
+      text: label,
+      labelType: 'radio',
+    }));
+    const checkbox2 = createElement('div', ['mwf-radio'], null, checkboxGroup);
+    checkbox2.appendChild(createInputCheckboxRadio({
+      type: inputType,
+      isRequired: isRequired,
+      name: name,
+      id: id2,
+      classes: 'mwf-radio__input'
+    }));
+    checkbox2.appendChild(createLabelFormCentric({
+      forAttribute: id2,
+      isRequired: isRequired,
+      text: label2,
+      labelType: 'radio',
+    }));
+  }
+
+  if (inputType === 'select') {
+    const selectDiv = createElement('div', ['mwf-select'], null, wrapper);
+    selectDiv.appendChild(createInputSelect({
+      placeholder: placeholder,
+      isRequired: isRequired,
+      name: name,
+      id: id,
+      classes: 'mwf-select__select',
+      options: selectOptions.length > 0 ? selectOptions : InputSelectData,
+    }));
+    selectDiv.appendChild(createLabelFormCentric({
+      forAttribute: id,
+      isRequired: isRequired,
+      text: label,
+      labelType: 'select',
+    }));
+    createElement('div', ['mwf-select__error'], 'Dieses Feld darf nicht leer sein.', selectDiv);
+  }
+
+  if (inputType === 'textarea') {
+    const textArea = createElement('div', ['mwf-textarea'], null, wrapper);
+
+    textArea.appendChild(createInputText({
+      placeholder: placeholder,
+      isRequired: isRequired,
+      name: name,
+      id: id,
+      type: inputType,
+      classes: 'mwf-textarea__input'
+    }));
+    textArea.appendChild(createLabelFormCentric({
+      forAttribute: id,
+      isRequired: isRequired,
+      text: label,
+      labelType: 'text',
+    }));
+    const hint = createElement('div', ['mwf-textarea__hint'], null, textArea);
+    createElement('p', [], 'Hier können Sie uns einen Kommentar hinterlassen (max. 1500 Zeichen).', hint);
+    createElement('div', ['mwf-textarea__error'], 'Dieses Feld darf nicht leer sein.', textArea);
+  }
+
+  if (inputType === 'checkboxGroup') {
+    const checkboxGroupLegend = createElement('legend', ['mwf-checkboxgroup__legend'], 'Legend Header', wrapper);
+    if (isRequired) {
+      const asterix = createElement('span', ['mwf-checkboxgroup__required','mwf-required'], '*', checkboxGroupLegend);
+      asterix.title = 'Pflichtfeld';
+    }
+    createElement('div', ['mwf-checkboxgroup__error'], 'Dieses Feld darf nicht leer sein.', wrapper);
+
+    const checkboxGroupOptions = createElement('div', ['mwf-checkboxgroup__options'], null, wrapper);
+    const checkboxBox = createElement('div', ['mwf-checkbox'], null, checkboxGroupOptions);
+    checkboxBox.appendChild(createInputCheckboxRadio({
+      type: 'checkbox',
+      name: name,
+      id: id,
+      classes: 'mwf-checkbox__input'
+    }));
+    checkboxBox.appendChild(createLabelFormCentric({
+      forAttribute: id,
+      text: label,
+      labelType: 'checkbox',
+    }));
+  }
+
+  if (inputType === 'file') {
+    const fileInput = createElement('div', ['mwf-file'], null, wrapper);
+    const fileLegend = createElement('div', ['mwf-file__legend'], null, fileInput);
+    createElement('p', ['mwf-file__label'], 'Upload', fileLegend);
+    createElement('div', ['mwf-file__error'], 'Dieses Feld darf nicht leer sein.', fileLegend);
+
+    const fileUploaded = createElement('div', ['mwf-file__uploaded'], null, fileInput);
+    const fileUploadedUl = createElement('ul', ['mwf-file__ul'], null, fileUploaded);
+    const fileUploadedRow = createElement('div', ['mwf-upload-row'], null, fileUploadedUl);
+    const fileUploadedInfo = createElement('div', ['mwf-upload-fileinfo'], null, fileUploadedRow);
+    createElement('div', ['mwf-upload-preview'], null, fileUploadedInfo);
+    const fileUploadedMeta = createElement('div', ['mwf-upload-metadata'], null, fileUploadedInfo);
+    const fileUploadedMetaUl = createElement('ul', [], null, fileUploadedMeta);
+    createElement('li', [], 'Name: data.pdf', fileUploadedMetaUl);
+    createElement('li', [], 'Size: 92.73 KB', fileUploadedMetaUl);
+
+    const fileUploadedActions = createElement('div', ['mwf-upload-actions'], null, fileUploadedRow);
+    createElement('button', ['mwf-upload-delete'], 'Delete', fileUploadedActions);
+    createElement('button', ['mwf-upload-upload'], 'Upload', fileUploadedActions);
+
+    const fileUploadedDropzone = createElement('div', ['mwf-file__dropzone'], null, fileInput);
+    const fileUploadedLabel = fileUploadedDropzone.appendChild(createLabelFormCentric({
+      forAttribute: id,
+      text: label,
+      classes: 'mwf-file__button',
+      labelType: 'text',
+    }));
+    const input = createElement('input', [], null, fileUploadedLabel);
+    input.type = 'file';
+    input.id = id;
+    input.name = name;
+    input.classes = ['mwf-file__input'];
+  }
+
+  return wrapper;
+}

gfi-ihk-2024/stories/components/form-element-form-centric/form-element-form-centric.scss

@@ -0,0 +1,75 @@
+.mwf-textinput,
+.mwf-select,
+.mwf-checkboxgroup,
+.mwf-radiogroup,
+.mwf-textarea,
+.mwf-file {
+  display: flex;
+  flex-direction: column;
+
+  p,
+  .mwf-file__label {
+    margin: 0;
+  }
+
+  label,
+  .mwf-checkboxgroup__options,
+  .mwf-radioroup__options {
+    order: 1;
+  }
+
+  input,
+  select,
+  textarea {
+    order: 2;
+  }
+
+  .mwf-textinput__hint,
+  .mwf-select__hint,
+  .mwf-checkbox__hint,
+  .mwf-radio__hint,
+  .mwf-textarea__hint {
+    order: 3;
+  }
+
+  .mwf-textinput__error,
+  .mwf-select__error,
+  .mwf-checkboxgroup__error,
+  .mwf-radiogroup__error,
+  .mwf-textarea__error {
+    order: 4;
+  }
+}
+
+.mwf-checkboxgroup .mwf-checkboxgroup__legend,
+.mwf-radiogroup .mwf-radiogroup__legend {
+  display: none;
+}
+
+.mwf-checkboxgroup,
+.mwf-radiogroup {
+  border: none;
+  margin: 0;
+  padding: 0 15px;
+  display: flex;
+  flex-direction: column;
+}
+
+.mwf-checkbox,
+.mwf-radio {
+  input {
+    margin-top: 2px !important;
+  }
+}
+
+.mwf-file__ul {
+  padding: 0;
+  margin: 0;
+}
+.mwf-upload-actions {
+  padding: 20px 0;
+}
+.mwf-textinput__label {
+  display: flex;
+  flex-direction: column;
+}