✨ Create a new contact form for Equinor pension

FeatureFlags.js

@@ -44,6 +44,7 @@ const CAREERS_CONTACT_FORM = [...GLOBAL_PROD, ...GLOBAL_DEV]
 const CONTACT_EQUINOR_FORM = [...GLOBAL_PROD, ...GLOBAL_DEV]
 const ORDER_REPORT_FORM = [...GLOBAL_PROD, ...GLOBAL_DEV]
 const CAREER_FAIR_AND_VISITS_FORM = [...GLOBAL_PROD, ...GLOBAL_DEV, 'brazil']
+const PENSION_FORM = [...GLOBAL_PROD, ...GLOBAL_DEV]
 
 const FANCY_MENU = [...GLOBAL_PROD, ...GLOBAL_DEV]
 /* LANDING_PAGE requires FANCY_MENU to work */
@@ -73,13 +74,15 @@ export default (dataset) => ({
     CAREER_FAIR_AND_VISITS_FORM.includes(dataset) ||
     CONTACT_EQUINOR_FORM.includes(dataset) ||
     ORDER_REPORT_FORM.includes(dataset) ||
-    SUBSCRIBE_FORM.includes(dataset),
+    SUBSCRIBE_FORM.includes(dataset) ||
+    PENSION_FORM.includes(dataset),
 
   HAS_SUBSCRIBE_FORM: SUBSCRIBE_FORM.includes(dataset),
   HAS_CAREERS_CONTACT_FORM: CAREERS_CONTACT_FORM.includes(dataset),
   HAS_CAREER_FAIR_AND_VISITS_FORM: CAREER_FAIR_AND_VISITS_FORM.includes(dataset),
   HAS_ORDER_REPORT_FORM: ORDER_REPORT_FORM.includes(dataset),
   HAS_CONTACT_EQUINOR_FORM: CONTACT_EQUINOR_FORM.includes(dataset),
+  HAS_PENSION_FORM: PENSION_FORM.includes(dataset),
 
   HAS_FANCY_MENU: FANCY_MENU.includes(dataset),
   /* LANDING_PAGE requires FANCY_MENU to work */

sanityv3/schemas/objects/form.tsx

@@ -22,6 +22,7 @@ type FormType =
   | 'careersContactForm'
   | 'orderReportsForm'
   | 'careerFairAndVisitsForm'
+  | 'pensionForm'
 
 const ingressContentType = configureBlockContent({
   h2: false,
@@ -67,6 +68,7 @@ export default {
             title: 'Career fairs and visits',
             value: 'careerFairAndVisitsForm',
           },
+          Flags.HAS_PENSION_FORM && { title: 'Pension form', value: 'pensionForm' },
         ].filter((e) => e),
         layout: 'dropdown',
       },
@@ -110,6 +112,8 @@ export default {
           return 'Careers contact form'
         } else if (type == 'orderReportsForm') {
           return 'Order reports'
+        } else if(type == 'pensionForm') {
+          return 'Pension form'
         }
         return 'Career fairs and visits'
       }

sanityv3/schemas/textSnippets.ts

@@ -10,14 +10,15 @@ export const groups = {
   contactForm: { title: 'Contact form', hidden: !Flags.HAS_CONTACT_EQUINOR_FORM },
   careerContactForm: { title: 'Careers Contact Form', hidden: !Flags.HAS_CAREERS_CONTACT_FORM },
   orderAnnualReportsForm: { title: 'Order annual reports form', hidden: !Flags.HAS_ORDER_REPORT_FORM },
+  pensionForm: { title: 'Pension form', hidden: !Flags.HAS_PENSION_FORM },
   form: { title: 'Form', hidden: !Flags.HAS_FORMS },
   cookie: { title: 'Cookie' },
   others: { title: 'Others' },
 }
 const snippets: textSnippet = {
   country_code_format: {
-    title: 'e.g. +47',
-    defaultValue: 'e.g. +47',
+    title: 'Enter country code with phone number',
+    defaultValue: 'Enter  country code with phone number',
     group: groups.form,
   },
   all_fields_mandatory: {
@@ -304,6 +305,81 @@ const snippets: textSnippet = {
     defaultValue: 'Submit form',
     group: groups.contactForm,
   },
+  pension_form_name: {
+    title: 'Name',
+    defaultValue: 'Name *',
+    group: groups.pensionForm,
+  },
+  pension_form_name_placeholder: {
+    title: 'Name Placeholder',
+    defaultValue: 'Jane Doe',
+    group: groups.pensionForm,
+  },
+  pension_form_name_validation: {
+    title: 'Name validation',
+    defaultValue: 'Please fill out your name',
+    group: groups.pensionForm,
+  },
+
+  pension_form_email: {
+    title: 'Email',
+    defaultValue: 'Email *',
+    group: groups.pensionForm,
+  },
+  pension_form_email_validation: {
+    title: 'Email validation',
+    defaultValue: 'Please fill out a valid email address',
+    group: groups.pensionForm,
+  },  
+  pension_form_category: {
+    title: 'Category',
+    defaultValue: 'Category',
+    group: groups.pensionForm,
+  },
+  pension_form_category_pension: {
+    title: 'Pension Category',
+    defaultValue: 'Pension',
+    group: groups.pensionForm,
+  },
+  pension_form_category_travel_insurance: {
+    title: 'Travel Insurance Category',
+    defaultValue: 'Travel Insurance',
+    group: groups.pensionForm,
+  },
+  pension_form_category_other: {
+    title: 'Other Pension/Insurance Related Category',
+    defaultValue: 'Other Pension/Insurance Related',
+    group: groups.pensionForm,
+  },
+
+  pension_form_what_is_your_request: {
+    title: 'What is your request?',
+    defaultValue: 'What is your request?',
+    group: groups.pensionForm,
+  },
+  pension_form_what_is_your_request_placeholder: {
+    title: `Requests Placeholder`,
+    defaultValue: `Please don't enter any personal information`,
+    group: groups.pensionForm,
+  },
+  pension_form_what_is_your_request_validation: {
+    title: 'Requests Validation',
+    defaultValue: 'Please let us know how we may help you',
+    group: groups.pensionForm,
+  },
+
+  pension_form_submit: {
+    title: 'Submit Button Text',
+    defaultValue: 'Submit Form',
+    group: groups.pensionForm,
+  },
+
+  pension_form_all_fields_mandatory: {
+    title: 'All fields with * are mandatory',
+    defaultValue: 'All fields with * are mandatory',
+    group: groups.pensionForm,
+  },
+
   career_fair_form_organisation: {
     title: 'Organisation',
     defaultValue: 'School / Organisation',
@@ -684,6 +760,16 @@ const snippets: textSnippet = {
     defaultValue: 'Reopen the form',
     group: groups.form,
   },
+  form_validation_maxChars: {
+    title: 'Max X chars',
+    defaultValue: 'Max {maxChars} characters',
+    group: groups.form,
+  },
+  form_antirobot_validation_required: {
+    title: 'Anti-Robot verification is required',
+    defaultValue: 'Anti-Robot verification is required',
+    group: groups.form,
+  },
   newsroom_topic_filter: {
     title: 'Topic filter heading',
     defaultValue: 'Topic',

web/components/src/Form/FormSelect.tsx

@@ -8,6 +8,9 @@ const StyledEdsNativeSelectField = styled(EdsNativeSelect)`
   select {
     font-size: var(--typeScale-1);
   }
+  label {
+    color: var(--default-text);
+  }
 `
 
 export const FormSelect = forwardRef<HTMLDivElement, NativeSelectProps>(function EdsNativeSelect(

web/components/src/Form/FormTextField.tsx

@@ -3,7 +3,6 @@ import styled from 'styled-components'
 import { TextField as EdsTextField, TextFieldProps } from '@equinor/eds-core-react'
 
 export const TextFieldWrapper = styled.div`
-  padding: var(--space-small) 0px var(--space-medium) 0px;
   p {
     color: var(--clear-red-100);
     font-size: var(--typeScale-0);
@@ -15,6 +14,9 @@ const StyledEdsTextField = styled(EdsTextField)`
   textarea {
     font-size: var(--typeScale-1);
   }
+  label {
+    color: var(--default-text);
+  }
 `
 
 export const FormTextField = forwardRef<HTMLDivElement, TextFieldProps>(function TextField({ children, ...rest }, ref) {

web/core/TextField/TextArea.tsx

@@ -0,0 +1,65 @@
+import { forwardRef, useState, TextareaHTMLAttributes, useCallback, CSSProperties } from 'react'
+import { mergeRefs, useAutoResize } from '@equinor/eds-utils'
+import { SharedTextFieldProps } from './TextField'
+import { Input } from '@equinor/eds-core-react'
+
+export type TextareaProps = {
+  /** Type */
+  type?: string
+  /** Read Only */
+  readOnly?: boolean
+  /** Specifies max rows for multiline  */
+  rowsMax?: number
+} & SharedTextFieldProps &
+  TextareaHTMLAttributes<HTMLTextAreaElement>
+
+/** Temporary. Until feature request,
+ * https://github.com/equinor/design-system/issues/3622,
+ * is resolved */
+export const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(function Textarea(
+  { variant, disabled = false, type = 'text', rowsMax = 10, className = '', ...other },
+  ref,
+) {
+  const [textareaEl, setTextareaEl] = useState<HTMLTextAreaElement | null>(null)
+  let fontSize = 16
+
+  if (textareaEl) {
+    fontSize = parseInt(window.getComputedStyle(textareaEl).fontSize)
+  }
+
+  const padding = 12 //6px from InputToken in EDS
+  const maxHeight = parseFloat('1.5') * fontSize * rowsMax + padding
+  //@ts-ignore: textareaEl is required, null is handled in hook
+  useAutoResize(textareaEl, rowsMax ? maxHeight : undefined)
+
+  const combinedRef = useCallback(() => mergeRefs<HTMLTextAreaElement>(ref, setTextareaEl), [setTextareaEl, ref])()
+
+  const inputProps = {
+    ref: combinedRef,
+    type,
+    disabled,
+    variant,
+    ...other,
+    style: { height: 'auto' },
+    className,
+  }
+
+  const leftAdornmentStyles = {
+    style: { alignItems: 'flex-start' },
+  }
+  const rightAdornmentStyles = {
+    style: {
+      alignItems: 'flex-start',
+      pointerEvents: 'none' as CSSProperties['pointerEvents'],
+    },
+  }
+
+  return (
+    <Input
+      as="textarea"
+      rightAdornmentsProps={rightAdornmentStyles}
+      leftAdornmentsProps={leftAdornmentStyles}
+      {...inputProps}
+    />
+  )
+})