TILA-1211 tooltips (#381)

* layout tweaks
* TILA-1211 tooltips
* TILA-1853 text changes
* TILA-1855 hide messages for preliminary reservation behind expand link

Author: siren

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/ActivationGroup.tsx

@@ -3,23 +3,30 @@ import { Checkbox } from "hds-react";
 import styled from "styled-components";
 
 const Indent = styled.div<{ $noIndent: boolean }>`
-  margin-top: var(--spacing-m);
   ${({ $noIndent }) => ($noIndent ? null : `margin-left: var(--spacing-l);`)}
 `;
 
+const Wrapper = styled.div<{ $noMargin: boolean }>`
+  ${({ $noMargin }) => ($noMargin ? null : `margin-top: var(--spacing-s);`)}
+`;
+
+Wrapper.displayName = "Wrapper";
+
 const ActivationGroup = ({
   id,
   label,
   initiallyOpen,
   children,
   noIndent = false,
+  noMargin = false,
   onClose,
 }: {
   id: string;
   label: string;
   initiallyOpen: boolean;
   children: React.ReactChild | React.ReactChild[];
   noIndent?: boolean;
+  noMargin?: boolean;
   onClose?: () => void;
 }): JSX.Element => {
   const [open, setOpen] = useState(initiallyOpen);
@@ -37,7 +44,12 @@ const ActivationGroup = ({
           }
         }}
       />
-      {open ? <Indent $noIndent={noIndent}>{children}</Indent> : null}
+
+      {open ? (
+        <Wrapper $noMargin={noMargin}>
+          <Indent $noIndent={noIndent}>{children}</Indent>
+        </Wrapper>
+      ) : null}
     </>
   );
 };

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/EnumSelect.tsx

@@ -27,6 +27,7 @@ const EnumSelect = <T,>({
   value,
   type,
   errorText,
+  tooltipText,
   sort = false,
 }: {
   id: string;
@@ -38,6 +39,7 @@ const EnumSelect = <T,>({
   onChange: (value: T) => void;
   type: { [key: string]: string };
   errorText?: string;
+  tooltipText?: string;
   sort?: boolean;
 }): JSX.Element => {
   const { t } = useTranslation();
@@ -65,6 +67,7 @@ const EnumSelect = <T,>({
         error={errorText}
         invalid={!!errorText}
         sort={sort}
+        tooltipText={tooltipText}
       />
     </>
   );

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/FieldGroup.tsx

@@ -0,0 +1,35 @@
+import { Tooltip } from "hds-react";
+import React from "react";
+import { HorisontalFlex } from "../../../styles/layout";
+import { Strong } from "../../../styles/util";
+
+export type Props = {
+  heading: string;
+  tooltip?: string;
+  id?: string;
+  children?: React.ReactNode;
+};
+const FieldGroup = ({
+  children,
+  id,
+  heading,
+  tooltip = "",
+}: Props): JSX.Element => (
+  <HorisontalFlex
+    style={{
+      justifyContent: "space-between",
+      width: "100%",
+    }}
+  >
+    <span>
+      <Strong style={{ display: "block", paddingBottom: "var(--spacing-xs)" }}>
+        {heading}
+      </Strong>
+      {id ? <span id={id} /> : null}
+      {children}
+    </span>
+    <Tooltip>{tooltip}</Tooltip>
+  </HorisontalFlex>
+);
+
+export default FieldGroup;

admin-ui/src/component/ReservationUnits/ReservationUnitEditor/ImageEditor.tsx

@@ -146,6 +146,7 @@ const ImageEditor = ({ images, setImages }: Props): JSX.Element => {
             dragAndDropInputLabel=" "
             maxSize={5242880}
             onChange={(files) => addImage(files)}
+            tooltipText={t("ReservationUnitEditor.tooltip.images")}
           />
         </FileInputContainer>
       </div>