Merge pull request #50 from ensdomains/eng-369_thorin-updates

Update Thorin to fit app v3
ensdomains · Jul 27, 2022 · 6ee3e2a · 6ee3e2a
2 parents 293bf2b + 9f4b26f
commit 6ee3e2a
Show file tree

Hide file tree

Showing 15 changed files with 867 additions and 288 deletions.
diff --git a/components/src/components/atoms/Field/Field.tsx b/components/src/components/atoms/Field/Field.tsx
@@ -13,6 +13,7 @@ const Context = React.createContext<State>(undefined)
 
 type NativeFormProps = React.AllHTMLAttributes<HTMLFormElement>
 type NativeLabelProps = React.LabelHTMLAttributes<HTMLLabelElement>
+type Placement = 'top' | 'bottom'
 
 export type FieldBaseProps = {
   /** Description text or react component. */
@@ -31,6 +32,8 @@ export type FieldBaseProps = {
   inline?: boolean
   /** A tokens space key value setting the width of the parent element. */
   width?: Space
+  /** Set the placement of the error and description. Does not affect inline mode. */
+  labelPlacement?: Placement | { error?: Placement; description?: Placement }
 }
 
 type Props = FieldBaseProps & {
@@ -141,6 +144,15 @@ const Error = styled.div<{ $inline?: boolean }>(
 `,
 )
 
+const getPlacement = (
+  label: 'error' | 'description',
+  fallback: Placement,
+  placement?: Props['labelPlacement'],
+): Placement => {
+  if (typeof placement === 'string') return placement
+  return placement?.[label] || fallback
+}
+
 export const Field = ({
   children,
   description,
@@ -152,6 +164,7 @@ export const Field = ({
   required,
   inline,
   width = 'full',
+  labelPlacement,
   ...props
 }: Props) => {
   const ids = useFieldIds({
@@ -171,6 +184,13 @@ export const Field = ({
   else if (children) content = React.cloneElement(children, ids.content)
   else content = children
 
+  const descriptionPlacement = getPlacement(
+    'description',
+    'bottom',
+    labelPlacement,
+  )
+  const errorPlacement = getPlacement('error', 'bottom', labelPlacement)
+
   return inline ? (
     <Container $inline={inline} $width={width}>
       <ContainerInner>
@@ -208,13 +228,23 @@ export const Field = ({
       ) : (
         <LabelContent {...{ ...props, ids, label, labelSecondary, required }} />
       )}
+
+      {description && descriptionPlacement === 'top' && (
+        <Description {...ids.description}>{description}</Description>
+      )}
+
+      {error && errorPlacement === 'top' && (
+        <Error aria-live="polite" {...ids.error}>
+          {error}
+        </Error>
+      )}
       {content}
 
-      {description && (
+      {description && descriptionPlacement === 'bottom' && (
         <Description {...ids.description}>{description}</Description>
       )}
 
-      {error && (
+      {error && errorPlacement === 'bottom' && (
         <Error aria-live="polite" {...ids.error}>
           {error}
         </Error>

diff --git a/components/src/components/molecules/Backdrop/Backdrop.tsx b/components/src/components/molecules/Backdrop/Backdrop.tsx
@@ -43,9 +43,33 @@ export const Backdrop = ({
 
   React.useEffect(() => {
     toggle(open || false)
+
+    let top = 0
+    if (typeof window !== 'undefined' && open) {
+      top = window.scrollY
+      document.body.style.position = 'fixed'
+      document.body.style.top = `-${top}px`
+    }
+
+    return () => {
+      if (typeof window !== 'undefined' && open) {
+        document.body.style.position = ''
+        document.body.style.top = ''
+        window.scroll({
+          top,
+        })
+      }
+    }
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [open])
 
+  React.useEffect(() => {
+    return () => {
+      document.body.style.position = ''
+      document.body.style.top = ''
+    }
+  }, [])
+
   return state !== 'unmounted' ? (
     <Portal className={className}>
       {onDismiss && (

diff --git a/components/src/components/molecules/Dropdown/Dropdown.tsx b/components/src/components/molecules/Dropdown/Dropdown.tsx
@@ -315,10 +315,13 @@ const DropdownMenu = ({
         }
 
         if (wrapper) {
-          return wrapper(<MenuButton {...props} />, value || label)
+          return wrapper(
+            <MenuButton {...props} type="button" />,
+            value || label,
+          )
         }
 
-        return <MenuButton {...props} key={value || label} />
+        return <MenuButton {...props} key={value || label} type="button" />
       })}
     </DropdownMenuContainer>
   )
@@ -512,6 +515,7 @@ export const Dropdown = ({
           $direction={direction}
           $open={isOpen}
           $size={size}
+          type="button"
           onClick={() => setIsOpen(!isOpen)}
         >
           {label}