From 0b3146f7278929c4d1b33dd8f94f34e351e5e5a9 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Fri, 8 Apr 2022 22:36:24 +0200
Subject: chore: add a Settings modal component

---
 src/components/molecules/forms/labelled-field.tsx | 34 ++++++++++++++++++++---
 1 file changed, 30 insertions(+), 4 deletions(-)

(limited to 'src/components/molecules/forms/labelled-field.tsx')

diff --git a/src/components/molecules/forms/labelled-field.tsx b/src/components/molecules/forms/labelled-field.tsx
index 7f81e23..08d0126 100644
--- a/src/components/molecules/forms/labelled-field.tsx
+++ b/src/components/molecules/forms/labelled-field.tsx
@@ -1,20 +1,46 @@
 import Field, { type FieldProps } from '@components/atoms/forms/field';
 import Label from '@components/atoms/forms/label';
-import { FC } from 'react';
+import { VFC } from 'react';
+import styles from './labelled-field.module.scss';
 
-type LabelledFieldProps = FieldProps & {
+export type LabelledFieldProps = FieldProps & {
+  /**
+   * Visually hide the field label. Default: false.
+   */
+  hideLabel?: boolean;
+  /**
+   * The field label.
+   */
   label: string;
+  /**
+   * The label position. Default: top.
+   */
+  labelPosition?: 'left' | 'top';
 };
 
-const LabelledField: FC<LabelledFieldProps> = ({
+/**
+ * LabelledField component
+ *
+ * Render a field tied to a label.
+ */
+const LabelledField: VFC<LabelledFieldProps> = ({
+  hideLabel = false,
   id,
   label,
+  labelPosition = 'top',
   required,
   ...props
 }) => {
+  const positionModifier = `label--${labelPosition}`;
+  const visibilityClass = hideLabel ? 'screen-reader-text' : '';
+
   return (
     <>
-      <Label htmlFor={id} required={required}>
+      <Label
+        htmlFor={id}
+        required={required}
+        className={`${visibilityClass} ${styles[positionModifier]}`}
+      >
         {label}
       </Label>
       <Field id={id} required={required} {...props} />
-- 
cgit v1.2.3