Merge branch 'release/0.18.15'

CHANGELOG.mdx

@@ -17,6 +17,16 @@ Prefix the change with one of these keywords:
 
 ## [Unreleased]
 
+## [0.18.15]
+
+### Added
+
+- React reference to Form components
+
+### Fixed
+
+- Navigation and Priority Plus work properly with any LinkProvider
+
 ## [0.18.14]
 
 ### Changed

lib/components/Form/Checkbox/Checkbox.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react'
 import { Field } from 'formik'
 import { FieldSetComponentProps } from '../FormFieldSet/FormFieldSet'
 import { fieldStyles } from '../form.Styles'
@@ -13,7 +14,7 @@ export interface CheckboxProps extends FieldSetComponentProps {
   refs?: Ref<HTMLInputElement | HTMLSelectElement>
 }
 
-export const Checkbox = ({ ...props }: CheckboxProps) => {
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(({ ...props }, ref) => {
   const { name, options, checkBoxRight, ...rest } = props
   const errorClass = useErrorClass(name)
 
@@ -27,11 +28,12 @@ export const Checkbox = ({ ...props }: CheckboxProps) => {
               name={name}
               value={option.value}
               className={`${fieldStyles.disabled} ${errorClass}`}
+              innerRef={ref}
               {...rest}
             />
             {option.label}
           </label>
         ))}
     </>
   )
-}
+})

lib/components/Form/FieldControl/FieldControl.tsx

@@ -1,4 +1,5 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
+import { forwardRef } from 'react'
 import { Input } from '../Input/Input'
 import { TextArea } from '../TextArea/TextArea'
 import { Select } from '../Select/Select'
@@ -21,7 +22,7 @@ export interface FieldControlSetProps extends FieldSetProps {
   [key: string]: any
 }
 
-export const FieldControl = ({ ...props }: FieldControlProps | FieldControlSetProps) => {
+export const FieldControl = forwardRef<HTMLInputElement, FieldControlProps>(({ ...props }, ref) => {
   const {
     control,
     name,
@@ -71,7 +72,7 @@ export const FieldControl = ({ ...props }: FieldControlProps | FieldControlSetPr
           displayError={displayError}
           hiddenLabel={hiddenLabel}
         >
-          {Component && <Component name={name} {...rest} />}
+          {Component && <Component name={name} innerRef={ref} {...rest} />}
         </FormField>
       )
     }
@@ -93,12 +94,13 @@ export const FieldControl = ({ ...props }: FieldControlProps | FieldControlSetPr
           hiddenLabel={hiddenLabel}
           {...rest}
         >
-          <Component name={name} {...rest} />
+          <Component name={name} innerRef={ref} {...rest} />
         </FormFieldSet>
       )
     }
 
     default:
       return null
   }
-}
+})
+export default FieldControl

lib/components/Form/FileUpload/FileUpload.tsx

@@ -1,4 +1,4 @@
-import { useState } from 'react'
+import { useState, forwardRef } from 'react'
 import { fieldStyles } from '../form.Styles'
 import { FieldComponentProps } from '../FormField/FormField'
 import useErrorClass from '../UseError'
@@ -12,7 +12,7 @@ export interface FileUploadProps extends FieldComponentProps {
   handleOnDelete?: () => void
 }
 
-export const FileUpload = ({ ...props }: FileUploadProps) => {
+export const FileUpload = forwardRef<HTMLInputElement, FileUploadProps>(({ ...props }, ref) => {
   const { name, onChange, displayPreview = true, setFieldValue = true, preview, handleOnDelete, ...rest } = props
   const errorClass = useErrorClass(name)
 
@@ -82,6 +82,7 @@ export const FileUpload = ({ ...props }: FileUploadProps) => {
         name={name}
         className={fieldStyles.uploads + ' ' + fieldStyles.disabled + errorClass}
         onChange={handleMediaChange}
+        ref={ref}
         {...rest}
       />
       {displayPreview && previews && previews.length > 0 && (
@@ -109,4 +110,4 @@ export const FileUpload = ({ ...props }: FileUploadProps) => {
       )}
     </div>
   )
-}
+})

lib/components/Form/Form.stories.tsx

@@ -1,4 +1,4 @@
-import React, { MouseEventHandler, useMemo, useState } from 'react'
+import React, { MouseEventHandler, useMemo, useState, useRef, useEffect } from 'react'
 import { type Meta, type StoryObj } from '@storybook/react'
 import { useFormik } from 'formik'
 import { FormikHelpers } from 'formik'
@@ -26,6 +26,10 @@ export default meta
 
 type Story = StoryObj<typeof Form>
 
+const sleep = (seconds: number) => {
+  return new Promise((resolve) => setTimeout(resolve, seconds))
+}
+
 export const Input: Story = () => {
   type IInput = {
     inputText: string
@@ -56,6 +60,24 @@ export const Input: Story = () => {
     onSubmit,
   })
 
+  const [inputDisabled, setInputDisabled] = useState(false)
+
+  const input = useRef<HTMLInputElement>(null)
+
+  const handleChange = async (e) => {
+    console.log(e.currentTarget.value)
+    formikProps.setFieldValue('inputText', e.currentTarget.value)
+    setInputDisabled(true)
+    await sleep(1000)
+    setInputDisabled(false)
+  }
+
+  useEffect(() => {
+    if (!inputDisabled) {
+      input?.current?.focus()
+    }
+  }, [inputDisabled])
+
   return (
     <Form formikProps={formikProps}>
       <Form.FieldGroup>
@@ -66,7 +88,9 @@ export const Input: Story = () => {
           required
           helper="Helper Text"
           helperpostop
-          disabled={formikProps.isSubmitting}
+          disabled={formikProps.isSubmitting || inputDisabled}
+          ref={input}
+          onChange={handleChange}
         />
       </Form.FieldGroup>
       <ButtonGroup>

lib/components/Form/FormField/FormField.tsx

@@ -8,6 +8,7 @@ type maxWidthKeys = keyof typeof maxWidthClasses
 export interface FieldComponentProps {
   name: string
   required?: boolean
+  innerRef?: React.Ref<HTMLInputElement>
 }
 
 export interface FieldProps extends FieldComponentProps {

lib/components/Form/FormFieldSet/FormFieldSet.tsx

@@ -8,6 +8,7 @@ type maxWidthKeys = keyof typeof maxWidthClasses
 export interface FieldSetComponentProps {
   name: string
   required?: boolean
+  innerRef?: React.Ref<HTMLInputElement>
 }
 
 export interface FieldSetProps extends FieldSetComponentProps {

lib/components/Form/Input/Input.tsx

@@ -1,3 +1,4 @@
+import React, { forwardRef } from 'react'
 import { Field } from 'formik'
 import { fieldStyles } from '../form.Styles'
 import { FieldComponentProps } from '../FormField/FormField'
@@ -9,7 +10,7 @@ export interface InputProps extends FieldComponentProps {
   disabled?: boolean
 }
 
-export const Input = ({ ...props }: InputProps) => {
+export const Input = forwardRef<HTMLInputElement, InputProps>(({ ...props }, ref) => {
   const { name, hasPrefix, hasSuffix, disabled, ...rest } = props
 
   const errorClass = useErrorClass(name)
@@ -23,9 +24,10 @@ export const Input = ({ ...props }: InputProps) => {
         name={name}
         disabled={disabled}
         className={`border-none w-full ${errorClass} ${disabled ? fieldStyles.disabled : ''} `}
+        innerRef={ref}
         {...rest}
       />
       {hasSuffix && hasSuffix}
     </div>
   )
-}
+})

lib/components/Form/Radio/Radio.tsx

@@ -1,3 +1,4 @@
+import { forwardRef } from 'react'
 import { Field } from 'formik'
 import { FieldSetComponentProps } from '../FormFieldSet/FormFieldSet'
 import { fieldStyles } from '../form.Styles'
@@ -12,7 +13,7 @@ export interface RadioProps extends FieldSetComponentProps {
   refs?: Ref<HTMLInputElement | HTMLSelectElement>
 }
 
-export const Radio = ({ ...props }: RadioProps) => {
+export const Radio = forwardRef<HTMLInputElement, RadioProps>(({ ...props }, ref) => {
   const { name, options, ...rest } = props
 
   const errorClass = useErrorClass(name)
@@ -27,11 +28,12 @@ export const Radio = ({ ...props }: RadioProps) => {
               name={name}
               className={`${fieldStyles.disabled} ${errorClass}`}
               value={option.value}
+              innerRef={ref}
               {...rest}
             />
             {option.label}
           </label>
         ))}
     </>
   )
-}
+})

lib/components/Form/Select/Select.tsx

@@ -1,19 +1,20 @@
-'use client'
+import { forwardRef } from 'react'
 import { Field } from 'formik'
 import { fieldStyles } from '../form.Styles'
 import { FieldComponentProps } from '../FormField/FormField'
 import useErrorClass from '../UseError'
 import { Ref } from 'react'
 
+export interface SelectOptions {
+  label: string
+  value: string
+}
 export interface SelectProps extends FieldComponentProps {
-  options?: {
-    label: string
-    value: string
-  }[]
+  options?: SelectOptions[]
   refs?: Ref<HTMLInputElement | HTMLSelectElement>
 }
 
-export const Select = ({ ...props }: SelectProps) => {
+export const Select = forwardRef<HTMLInputElement, SelectProps>(({ ...props }, ref) => {
   const { name, options, ...rest } = props
 
   const errorClass = useErrorClass(name)
@@ -24,10 +25,11 @@ export const Select = ({ ...props }: SelectProps) => {
       id={name}
       name={name}
       className={`${fieldStyles.input} ${fieldStyles.disabled} ${errorClass}`}
+      innerRef={ref}
       {...rest}
     >
       {options &&
-        options.map((option) => {
+        options.map((option: SelectOptions) => {
           return (
             <option key={option.value} value={option.value}>
               {option.label}
@@ -36,4 +38,4 @@ export const Select = ({ ...props }: SelectProps) => {
         })}
     </Field>
   )
-}
+})

lib/components/Form/TextArea/TextArea.tsx

@@ -1,9 +1,10 @@
+import { forwardRef } from 'react'
 import { Field } from 'formik'
 import { fieldStyles } from '../form.Styles'
 import { FieldComponentProps } from '../FormField/FormField'
 import useErrorClass from '../UseError'
 
-export const TextArea = ({ ...props }: FieldComponentProps) => {
+export const TextArea = forwardRef<HTMLInputElement, FieldComponentProps>(({ ...props }, ref) => {
   const { name, ...rest } = props
 
   const errorClass = useErrorClass(name)
@@ -14,7 +15,8 @@ export const TextArea = ({ ...props }: FieldComponentProps) => {
       id={name}
       name={name}
       className={`${fieldStyles.input} ${fieldStyles.disabled} ${errorClass}`}
+      innerRef={ref}
       {...rest}
     />
   )
-}
+})

lib/components/FullBanner/FullBanner.stories.tsx

@@ -42,3 +42,26 @@ export const Primary: Story = {
     )
   },
 }
+
+// export const Video: Story = {
+//   args: {
+//     as: 'section',
+//   },
+//   render: (args) => {
+//     return (
+//       <FullBanner {...args}>
+//         <FullBanner.Video videoName="timelapse-quad" />
+//         <FullBanner.Content title="The nostalgia is real." headerType="h1">
+//           <p>
+//             The launch of the iPod revolutionized how the world consumes music on the move! The launch of the iPod
+//             revolutionized how the world consumes music on the move!
+//           </p>
+//           <ButtonGroup>
+//             <Button title="Apply Now" />
+//             <Button color="grey" title="Request Information" />
+//           </ButtonGroup>
+//         </FullBanner.Content>
+//       </FullBanner>
+//     )
+//   },
+// }

lib/components/FullBanner/FullBannerVideo.tsx

@@ -0,0 +1,33 @@
+const videos = [
+  { name: 'cu-flyby', description: 'A flyby video of campus with scenic views of buildings and greenery.' },
+  { name: 'timelapse-quad', description: 'A timelapse of the main quad showing students and campus life.' },
+] as const
+
+type VideoNameKeys = (typeof videos)[number]['name']
+
+export interface FullBannerVideoProps {
+  videoName?: VideoNameKeys
+}
+
+export const FullBannerVideo = ({ videoName = 'cu-flyby' }: FullBannerVideoProps) => {
+  const video = videos.find((v) => v.name === videoName)
+
+  return (
+    <div className="relative">
+      <video
+        className="rounded-none w-full h-auto bg-black"
+        autoPlay
+        muted
+        loop
+        controls
+        aria-label={video?.description || 'Default video description'}
+      >
+        <source src={`https://cu-media.s3.amazonaws.com/videos/${videoName}.webm`} type="video/webm" />
+        <source src={`https://cu-media.s3.amazonaws.com/videos/${videoName}.mp4`} type="video/mp4" />
+        <p>Your browser does not support the video tag.</p>
+      </video>
+    </div>
+  )
+}
+
+FullBannerVideo.displayName = 'FullBanner.Video'

lib/components/FullBanner/styles.css

@@ -17,6 +17,12 @@ section.cu-section > .cu-fullbanner:first-of-type {
   @apply mb-0;
 }
 
+/* Image */
+
+.cu-fullbanner img {
+  @apply rounded-none w-full h-auto;
+}
+
 /* Font Styles */
 
 .cu-fullbanner .cu-pageheader h1 {

lib/components/Nav/Nav.tsx

@@ -6,6 +6,7 @@ import { NavSecondary } from './NavSecondary'
 import { NavMenu } from './NavMenu'
 import setupMenuToggle from './navToggles'
 import scrollingNav from './scrollingNav'
+import menuPriority from './priorityPlus'
 
 export interface NavWrapperProps {
   navType?: 'primary' | 'secondary'
@@ -14,6 +15,7 @@ export interface NavWrapperProps {
 
 export const NavWrapper = ({ navType, children }: NavWrapperProps) => {
   useEffect(() => {
+    menuPriority()
     setupMenuToggle()
     scrollingNav()
   }, [])