Create generic classes for the generic DoubleInputRow component

danskernesdigitalebibliotek · May 14, 2024 · bb1f955 · bb1f955
1 parent ac2cd9c
commit bb1f955
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 3 deletions.
diff --git a/src/stories/Library/Forms/input/DoubleInputRow.tsx b/src/stories/Library/Forms/input/DoubleInputRow.tsx
@@ -10,18 +10,18 @@ const DoubleInputRow: React.FC<DoubleInputRowProps> = ({
   rightLabel,
 }) => {
   return (
-    <div className="contact-info-flex">
+    <div className="dpl-input__flex">
       <Input
         id={leftLabel}
         label={leftLabel}
         type="text"
-        classNames="patron__input patron__input--desktop mr-16"
+        classNames="dpl-input dpl-input--double mr-16"
       />
       <Input
         id={rightLabel}
         label={rightLabel}
         type="text"
-        classNames="patron__input patron__input--desktop"
+        classNames="dpl-input dpl-input--double"
       />
     </div>
   );

diff --git a/src/stories/Library/Forms/input/input.scss b/src/stories/Library/Forms/input/input.scss
@@ -20,6 +20,24 @@
     }
   }
 
+  &__flex {
+    display: flex;
+    flex-direction: column;
+
+    @include media-query__small {
+      flex-direction: row;
+    }
+  }
+
+  &.dpl-input--double {
+    width: 100%;
+    margin-bottom: $s-xl;
+
+    @include media-query__small {
+      margin-bottom: 0px;
+    }
+  }
+
   &__description {
     color: $color__text-secondary-gray;
     @include typography($typo__body-small);
@@ -41,6 +59,7 @@
 
   /* Firefox */
   input[type="number"] {
+    appearance: textfield;
     -moz-appearance: textfield;
   }
 }