basic modal styling

nerdgeschoss · Jan 16, 2025 · 95fb8ca · 95fb8ca
1 parent 316b620
commit 95fb8ca
Show file tree

Hide file tree

Showing 20 changed files with 353 additions and 241 deletions.
diff --git a/app/frontend/components/box/box.scss b/app/frontend/components/box/box.scss
@@ -0,0 +1,3 @@
+.box {
+  padding: var(--size) var(--sizeHorizontal) var(--size) var(--sizeHorizontal);
+}
diff --git a/app/frontend/components/box/box.tsx b/app/frontend/components/box/box.tsx
@@ -0,0 +1,30 @@
+import React, { ReactNode } from 'react';
+import './box.scss';
+
+interface Props {
+  children: ReactNode;
+  size?: number;
+  sizeHorizontal?: number;
+  sizeTablet?: number;
+  sizeTableHorizontal?: number;
+  sizeDesktop?: number;
+  sizeDesktopHorizontal?: number;
+}
+
+export function Box({ children, size, sizeHorizontal }: Props): JSX.Element {
+  size = size ?? 8;
+  sizeHorizontal = sizeHorizontal ?? size;
+  return (
+    <div
+      className="box"
+      style={
+        {
+          '--size': `${size}px`,
+          '--sizeHorizontal': `${sizeHorizontal}px`,
+        } as React.CSSProperties
+      }
+    >
+      {children}
+    </div>
+  );
+}
diff --git a/app/frontend/components/button/button.scss b/app/frontend/components/button/button.scss
@@ -0,0 +1,8 @@
+.button {
+  color: white;
+  background-color: #2da9ff;
+  padding: 8px 16px;
+  border-radius: 60px;
+  cursor: pointer;
+  width: fit-content;
+}
diff --git a/app/frontend/components/button/button.tsx b/app/frontend/components/button/button.tsx
@@ -1,4 +1,6 @@
 import React from 'react';
+import { Text } from '../text/text';
+import './button.scss';
 
 interface Props {
   title: string;
@@ -17,7 +19,7 @@ export function Button({ title, disabled, onClick }: Props): JSX.Element {
       }}
       disabled={disabled}
     >
-      {title}
+      <Text>{title}</Text>
     </button>
   );
 }
diff --git a/app/frontend/components/checkbox/checkbox.scss b/app/frontend/components/checkbox/checkbox.scss
@@ -12,4 +12,8 @@
       height: 10px;
     }
   }
+
+  &__content {
+    display: flex;
+  }
 }
diff --git a/app/frontend/components/checkbox/checkbox.tsx b/app/frontend/components/checkbox/checkbox.tsx
@@ -4,6 +4,7 @@ import { Text } from '../text/text';
 import { FormField, useInputId } from '../form_field/form_field';
 import classnames from 'classnames';
 import './checkbox.scss';
+import { Stack } from '../stack/stack';
 
 interface Props extends FormField<boolean> {
   label?: ReactNode;
@@ -40,7 +41,32 @@ export function Checkbox({
           { disabled }
         )}
       >
-        <div className="checkbox__content">
+        <Stack line="mobile" size={4}>
+          <input
+            id={inputId}
+            name={name}
+            className={classnames('checkbox__input')}
+            readOnly={readOnly}
+            checked={value}
+            type="checkbox"
+            onChange={(event) => {
+              if (readOnly) {
+                event.preventDefault();
+                return;
+              }
+              onChange?.(event.target.checked);
+            }}
+            onFocus={() => {
+              onFocus?.();
+            }}
+            onBlur={() => {
+              onBlur?.();
+            }}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled}
+            aria-label={ariaLabel}
+          />
           {label !== undefined && (
             <label
               className={classnames('checkbox__label', {
@@ -51,34 +77,7 @@ export function Checkbox({
               {label}
             </label>
           )}
-          <Text>
-            <input
-              id={inputId}
-              name={name}
-              className={classnames('checkbox__input')}
-              readOnly={readOnly}
-              checked={value}
-              type="checkbox"
-              onChange={(event) => {
-                if (readOnly) {
-                  event.preventDefault();
-                  return;
-                }
-                onChange?.(event.target.checked);
-              }}
-              onFocus={() => {
-                onFocus?.();
-              }}
-              onBlur={() => {
-                onBlur?.();
-              }}
-              placeholder={placeholder}
-              required={required}
-              disabled={disabled}
-              aria-label={ariaLabel}
-            />
-          </Text>
-        </div>
+        </Stack>
         {touched && errors && (
           <div className="checkbox__errors">
             {errors.map((error) => (

diff --git a/app/frontend/components/collapse_panel/collapse_panel.scss b/app/frontend/components/collapse_panel/collapse_panel.scss
@@ -0,0 +1,17 @@
+.collapse-panel {
+  display: grid;
+  grid-template-rows: 0fr;
+  overflow: hidden;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+
+  &__content {
+    min-height: 0;
+  }
+
+  &--open {
+    // We only want to set overflow visible after the panel has been opened and the transition is done
+    overflow: var(--collapse-panel-overflow, hidden);
+    grid-template-rows: 1fr;
+  }
+}
diff --git a/app/frontend/components/collapse_panel/collapse_panel.tsx b/app/frontend/components/collapse_panel/collapse_panel.tsx
@@ -0,0 +1,41 @@
+import React, { useEffect } from 'react';
+import classnames from 'classnames';
+import './collapse_panel.scss';
+
+type RenderFunction = () => React.ReactNode;
+
+export interface Props {
+  open?: boolean;
+  children: React.ReactNode | RenderFunction;
+}
+
+export function CollapsePanel({ open, children }: Props): JSX.Element {
+  const ref = React.useRef<HTMLDivElement>(null);
+
+  function toggleOverflow(): void {
+    const container = ref.current;
+    if (container !== null) {
+      if (container.classList.contains('collapse-panel--open')) {
+        container.setAttribute('style', '--collapse-panel-overflow: visible');
+      } else {
+        container.setAttribute('style', '--collapse-panel-overflow: hidden');
+      }
+    }
+  }
+
+  useEffect(() => {
+    toggleOverflow();
+  }, []);
+
+  return (
+    <div
+      ref={ref}
+      className={classnames('collapse-panel', { 'collapse-panel--open': open })}
+      onTransitionEnd={toggleOverflow}
+    >
+      <div className="collapse-panel__content">
+        {typeof children === 'function' ? children() : children}
+      </div>
+    </div>
+  );
+}
diff --git a/app/frontend/components/modal/modal.scss b/app/frontend/components/modal/modal.scss
@@ -36,8 +36,8 @@ $animation_time: 0.35s;
   &__close {
     position: absolute;
     z-index: 999;
-    top: 10px;
-    right: 10px;
+    top: 32px;
+    right: 32px;
     background-image: url(./close.svg);
     background-size: contain;
     background-repeat: no-repeat;
@@ -75,6 +75,7 @@ $animation_time: 0.35s;
     border-radius: 16 0 0 16;
     transform: translate(100%, 0px);
     max-height: 90vh;
+    border-radius: 16px;
 
     @include layout.media-tablet {
       max-height: 100%;

diff --git a/app/frontend/components/text_area/text_area.scss b/app/frontend/components/text_area/text_area.scss
@@ -3,28 +3,15 @@
   flex-direction: column;
   border-bottom: 1px solid var(--color-border);
 
-  &--boolean {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 8px;
-    border-bottom: 0;
-
-    .input__label {
-      font-size: 16px;
-    }
-
-    .input__input {
-      appearance: auto;
-    }
-  }
-
   &__label {
     font-size: 10px;
   }
 
   &__input {
     outline: none;
     border-bottom: 1px solid currentColor;
+    width: 100%;
+    min-width: 100%;
+    max-width: 100%;
   }
 }
diff --git a/app/frontend/components/text_area/text_area.tsx b/app/frontend/components/text_area/text_area.tsx
@@ -51,32 +51,30 @@ export function TextArea({
               {label}
             </label>
           )}
-          <Text>
-            <textarea
-              id={inputId}
-              name={name}
-              className={classnames('text-area__input')}
-              readOnly={readOnly}
-              value={value ?? ''}
-              onChange={(event) => {
-                if (readOnly) {
-                  event.preventDefault();
-                  return;
-                }
-                onChange?.(event.target.value);
-              }}
-              onFocus={() => {
-                onFocus?.();
-              }}
-              onBlur={() => {
-                onBlur?.();
-              }}
-              placeholder={placeholder}
-              required={required}
-              disabled={disabled}
-              aria-label={ariaLabel}
-            />
-          </Text>
+          <textarea
+            id={inputId}
+            name={name}
+            className={classnames('text-area__input')}
+            readOnly={readOnly}
+            value={value ?? ''}
+            onChange={(event) => {
+              if (readOnly) {
+                event.preventDefault();
+                return;
+              }
+              onChange?.(event.target.value);
+            }}
+            onFocus={() => {
+              onFocus?.();
+            }}
+            onBlur={() => {
+              onBlur?.();
+            }}
+            placeholder={placeholder}
+            required={required}
+            disabled={disabled}
+            aria-label={ariaLabel}
+          />
         </div>
         {touched && errors && (
           <div className="text-area__errors">

diff --git a/app/frontend/components/text_field/text_field.scss b/app/frontend/components/text_field/text_field.scss
@@ -3,28 +3,13 @@
   flex-direction: column;
   border-bottom: 1px solid var(--color-border);
 
-  &--boolean {
-    flex-direction: row-reverse;
-    justify-content: flex-end;
-    align-items: center;
-    gap: 8px;
-    border-bottom: 0;
-
-    .input__label {
-      font-size: 16px;
-    }
-
-    .input__input {
-      appearance: auto;
-    }
-  }
-
   &__label {
     font-size: 10px;
   }
 
   &__input {
     outline: none;
     border-bottom: 1px solid currentColor;
+    width: 100%;
   }
 }