horizontal / upload button / widths

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

@@ -18,11 +18,14 @@ export const createFormCentricElement = ({
   label2 = 'Benutzername',
   selectOptions = [],
 }) => {
-  const wrapper = createElement('div', wrapperClasses.split(' '));
+  const wrapperOuter = createElement('div', wrapperClasses.split(' '));
   if (!id || id.length === 0) {
     id = name;
   }
 
+  const wrapper = createElement('div', ['mwf-layout'], null, wrapperOuter);
+
+
   if (inputType === 'text') {
     const textInput = createElement('div', ['mwf-textinput'], null, wrapper);
 
@@ -199,5 +202,5 @@ export const createFormCentricElement = ({
     input.classList.add ('mwf-file__input');
   }
 
-  return wrapper;
+  return wrapperOuter;
 }

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

@@ -1,3 +1,29 @@
+@import '../../_global/styles/mixins';
+@import '../../_global/styles/vars';
+
+.mwf-layout {
+  margin-top: var(--content-box-padding);
+  display: flex;
+  flex-wrap: wrap;
+  gap: 20px;
+  width: 100%;
+  > * {
+    flex-basis: 100%;
+    &.width--s {
+      flex-basis: calc(20% - 16px);
+    }
+    &.width--m {
+      flex-basis: calc(50% - 10px);
+    }
+    &.width--l {
+      flex-basis: calc(80% - 4px);
+    }
+    @media (max-width: 767px) {
+      flex-basis: 100% !important;
+    }
+  }
+}
+
 .mwf-textinput,
 .mwf-select,
 .mwf-checkboxgroup,
@@ -6,6 +32,13 @@
 .mwf-file {
   display: flex;
   flex-direction: column;
+  padding-bottom: 15px !important;
+
+  &.has-error {
+    input, select, textarea {
+      box-shadow: 0 0 0 2px red, 0 0 8px 2px red;
+    }
+  }
 
   p,
   .mwf-file__label {
@@ -16,6 +49,7 @@
   .mwf-checkboxgroup__options,
   .mwf-radioroup__options {
     order: 1;
+    font-size: var(--font-size-copy);
   }
 
   input,
@@ -30,6 +64,8 @@
   .mwf-radio__hint,
   .mwf-textarea__hint {
     order: 3;
+    text-align: end;
+    font-size: var(--font-size-small);
   }
 
   .mwf-textinput__error,
@@ -46,13 +82,28 @@
   display: none;
 }
 
+.mwf-checkboxgroup .mwf-checkboxgroup__options,
+.mwf-radiogroup .mwf-radiogroup__options {
+  padding: 0 15px;
+}
+
 .mwf-checkboxgroup,
 .mwf-radiogroup {
   border: none;
   margin: 0;
-  padding: 0 15px;
+  padding: 0;
   display: flex;
   flex-direction: column;
+  &.horizontal {
+    .mwf-checkboxgroup__options,
+    .mwf-radiogroup__options {
+      display: flex;
+      .mwf-checkbox,
+      .mwf-radio {
+        margin-right: 30px;
+      }
+    }
+  }
 }
 
 .mwf-checkbox,
@@ -62,14 +113,111 @@
   }
 }
 
-.mwf-file__ul {
-  padding: 0;
-  margin: 0;
-}
-.mwf-upload-actions {
-  padding: 20px 0;
-}
 .mwf-textinput__label {
   display: flex;
-  flex-direction: column;
+}
+
+.mwf-file {
+  .mwf-file__legend {
+    order: 1;
+  }
+
+  .mwf-file__uploaded {
+    order: 3;
+    .mwf-file__ul {
+      padding: 10px 0 0 0;
+      margin: 0;
+      .mwf-upload-row {
+        @media (min-width: 768px) {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+        }
+      }
+      .mwf-upload-fileinfo {
+        display: flex;
+        align-items: center;
+        .mwf-upload-preview {
+          height: 50px;
+          width: 50px;
+          background-size: cover;
+          margin-right: 10px;
+        }
+        .mwf-upload-metadata {
+
+        }
+      }
+      .mwf-upload-actions {
+        padding: 0;
+        button {
+          margin-left: 10px;
+          padding: 10px 24px;
+          background-color: var(--theme-color-primary);
+          color: var(--theme-color-white);
+          border-radius: var(--border-radius-md);
+          border: none;
+          line-height: 1;
+          text-decoration: none;
+          font-family: 'Korb', sans-serif;
+          cursor: pointer;
+          font-weight: 400;
+          transition: 0.2s ease;
+          @include focus-visible;
+        }
+      }
+      ul {
+        padding: 0;
+        list-style: none;
+        font-size: 12px;
+      }
+    }
+  }
+
+  .mwf-file__dropzone {
+    order: 2;
+    background-color: #fff;
+    border: 2px dashed #ccc;
+    display: block;
+    text-align: center;
+    label {
+      color: #b4b4b4;
+      font-size: 110%;
+      font-weight: 200;
+      line-height: 1.5em;
+      padding: 2em .5em 5em .5em;
+      font-family: 'Korb', sans-serif;
+      position: relative;
+      display: block;
+      &:after {
+        position: absolute;
+        left: 50%;
+        bottom: 1em;
+        transform: translate(-50%, 0);
+        content: "Datei auswählen";
+        background-color: var(--theme-color-primary);
+        color: var(--theme-color-white);
+        border-radius: var(--border-radius-md);
+        box-shadow: 0 0 0 2px var(--theme-color-primary);
+        cursor: pointer;
+        display: inline-flex;
+        font-family: 'Korb', sans-serif;
+        font-size: var(--font-size-copy);
+        font-weight: 400;
+        line-height: 1;
+        padding: 10px 24px;
+        white-space: nowrap;
+      }
+      input {
+        opacity: 0;
+        cursor: pointer;
+        font-size: 20px;
+        margin: 0;
+        padding: 0;
+        position: absolute;
+        left: 50%;
+        top: 0;
+        transform: translate(-50%, 0);
+      }
+    }
+  }
 }