Merge branch 'malj/2569' into staging

equinor · Oct 21, 2024 · 5cf4dc5 · 5cf4dc5
2 parents ba44f54 + 3c51954
commit 5cf4dc5
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 37 deletions.
diff --git a/web/components/src/Accordion/Item.tsx b/web/components/src/Accordion/Item.tsx
@@ -1,18 +1,14 @@
-import styled from 'styled-components'
 import { AccordionItem } from '@chakra-ui/react'
 
-const StyledItem = styled(AccordionItem)`
-  border-bottom: 1px solid var(--grey-40);
-`
 export type AccordionItemProps = {
   id: number
   children: React.ReactNode
 }
 
 export const Item = ({ id, children, ...rest }: AccordionItemProps) => {
   return (
-    <StyledItem {...rest} index={id}>
+    <AccordionItem style={{borderBottom: '1px solid var(--grey-40)'}}{...rest} key={id}>
       {children}
-    </StyledItem>
+    </AccordionItem>
   )
 }
diff --git a/web/pageComponents/topicPages/Form/CareerFairForm.tsx b/web/pageComponents/topicPages/Form/CareerFairForm.tsx
@@ -3,8 +3,14 @@ import { Icon } from '@equinor/eds-core-react'
 import { useForm, Controller } from 'react-hook-form'
 import { error_filled } from '@equinor/eds-icons'
 import { FormattedMessage, useIntl } from 'react-intl'
-import { FormTextField, Checkbox, FormSelect, FormSubmitSuccessBox, FormSubmitFailureBox } from '@components'
-import styled from 'styled-components'
+import {
+  FormButton,
+  FormTextField,
+  Checkbox,
+  FormSelect,
+  FormSubmitSuccessBox,
+  FormSubmitFailureBox,
+} from '@components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from './FriendlyCaptcha'
 import { TextField } from '@core/TextField/TextField'
@@ -22,15 +28,6 @@ type FormValues = {
   preferredLang: string
 }
 
-const StyledHelper = styled.p`
-  margin-top: calc(var(--space-small) * -1);
-  font-size: var(--typeScale-0);
-`
-
-const StyledCheckBox = styled(Checkbox)`
-  padding-bottom: var(--space-medium);
-`
-
 const CareerFairForm = () => {
   const intl = useIntl()
   const [isFriendlyChallengeDone, setIsFriendlyChallengeDone] = useState(false)
@@ -265,13 +262,13 @@ const CareerFairForm = () => {
                       id: 'career_fair_form_visit_equinor',
                       defaultMessage: 'Would like to visit Equinor office or facility',
                     }) && (
-                    <StyledHelper id="select-helper-text">
+                    <p className='-mt-2' id="select-helper-text">
                       {intl.formatMessage({
                         id: 'career_fair_form_visit_equinor_helper_text',
                         defaultMessage:
                           'Please be aware that we only offer visits to a few selected locations. Please specify your preferred location and we will revert to you as soon as we can.',
                       })}
-                    </StyledHelper>
+                    </p>
                   )}
                 </>
               )}
@@ -329,7 +326,8 @@ const CareerFairForm = () => {
                 />
               )}
             />
-            <StyledCheckBox
+            <Checkbox
+              className='pb-4'
               label={intl.formatMessage({
                 id: 'career_fair_form_supporting_documents',
                 defaultMessage:

diff --git a/web/pageComponents/topicPages/Form/Form.tsx b/web/pageComponents/topicPages/Form/Form.tsx
@@ -1,4 +1,3 @@
-import styled from 'styled-components'
 import TitleText from '../../shared/portableText/TitleText'
 import IngressText from '../../shared/portableText/IngressText'
 import ContactEquinorForm from './ContactEquinorForm'
@@ -11,14 +10,7 @@ import { twMerge } from 'tailwind-merge'
 import CallToActions from '@sections/CallToActions'
 import PensionForm from './PensionForm'
 
-const StyledHeading = styled(TitleText)`
-  padding: 0 0 var(--space-large) 0;
-`
 
-const ListStyled = styled.div`
-  padding-bottom: var(--space-3xLarge);
-  font-size: var(--typeScale-1);
-`
 
 const Form = ({ data, anchor, className }: { data: FormData; anchor?: string; className?: string }) => {
   const { title, ingress, downloads } = data
@@ -40,9 +32,9 @@ const Form = ({ data, anchor, className }: { data: FormData; anchor?: string; cl
           <>
             <>
               {downloads && (
-                <ListStyled>
+                <div className='pb-10'>
                   {downloads.length > 0 && <CallToActions callToActions={downloads} overrideButtonStyle />}
-                </ListStyled>
+                </div>
               )}
             </>
             <OrderReportsForm />
@@ -53,7 +45,7 @@ const Form = ({ data, anchor, className }: { data: FormData; anchor?: string; cl
 
   return (
     <div className={twMerge(`pb-page-content px-layout-lg max-w-viewport mx-auto`, className)} id={anchor}>
-      {title && <StyledHeading value={title} />}
+      {title && <TitleText className='px-0 pt-0 pr-6' value={title} />}
       {ingress && <IngressText value={ingress}></IngressText>}
 
       {renderForm(variant)}

diff --git a/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx b/web/pageComponents/topicPages/Form/careersContactForm/CareersContactForm.tsx
@@ -6,7 +6,6 @@ import { FormattedMessage, useIntl } from 'react-intl'
 import { FormTextField, Checkbox, FormSelect, FormSubmitSuccessBox, FormSubmitFailureBox } from '@components'
 import { BaseSyntheticEvent, useState } from 'react'
 import FriendlyCaptcha from '../FriendlyCaptcha'
-import styled from 'styled-components'
 import getCatalogType from './getRequestType'
 import { TextField } from '@core/TextField/TextField'
 import { Button } from '@core/Button'
@@ -23,10 +22,6 @@ type FormValues = {
   supportingDocuments: string
 }
 
-const StyledCheckBox = styled(Checkbox)`
-  padding-bottom: var(--space-medium);
-`
-
 const CareersContactForm = () => {
   const intl = useIntl()
   const [isFriendlyChallengeDone, setIsFriendlyChallengeDone] = useState(false)
@@ -363,7 +358,8 @@ const CareersContactForm = () => {
                 />
               )}
             />
-            <StyledCheckBox
+            <Checkbox
+              className='pb-4'
               label={intl.formatMessage({
                 id: 'career_fair_form_supporting_documents',
                 defaultMessage: