Refactor FigCaption to tailwind #2179

web/components/src/FigureCaption/Attribution.tsx

@@ -1,14 +1,10 @@
 import { forwardRef, HTMLAttributes } from 'react'
-import styled from 'styled-components'
-
 export type AttributionProps = HTMLAttributes<HTMLDivElement>
 
-export const StyledAttribution = styled.div``
-
 export const Attribution = forwardRef<HTMLDivElement, AttributionProps>(function ({ children, ...rest }, ref) {
   return (
-    <StyledAttribution ref={ref} {...rest}>
+    <div ref={ref} {...rest}>
       {children}
-    </StyledAttribution>
+    </div>
   )
 })

web/components/src/FigureCaption/Caption.tsx

@@ -1,14 +1,11 @@
 import { forwardRef, HTMLAttributes } from 'react'
-import styled from 'styled-components'
 
 export type CaptionProps = HTMLAttributes<HTMLDivElement>
 
-export const StyledCaption = styled.div``
-
 export const Caption = forwardRef<HTMLDivElement, CaptionProps>(function ({ children, ...rest }, ref) {
   return (
-    <StyledCaption ref={ref} {...rest}>
+    <div ref={ref} {...rest}>
       {children}
-    </StyledCaption>
+    </div>
   )
 })

web/components/src/FigureCaption/FigureCaption.tsx

@@ -1,43 +1,25 @@
-import { forwardRef, HTMLAttributes, CSSProperties } from 'react'
-import { Typography } from '@equinor/eds-core-react'
-import styled from 'styled-components'
-import { style } from '@equinor/eds-icons'
-
-export const StyledFigCaption = styled(Typography)`
-  font-size: var(--size);
-  margin-top: var(--space-small);
-  color: var(--color-on-background);
-
-  @media (min-width: 800px) {
-    max-width: 560px;
-  }
-
-  @media (min-width: 1300px) {
-    max-width: 635px;
-  }
-`
+import { forwardRef, HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
 
 export type FigureCaptionProps = {
   size?: 'small' | 'medium'
 } & HTMLAttributes<HTMLElement>
 
-export const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(function FigureCaption(
-  { size = 'small', children, ...rest },
-  ref,
-) {
+export const FigureCaption = forwardRef<HTMLElement, FigureCaptionProps>(function FigureCaption({
+  size = 'small',
+  children,
+  className,
+  ...rest
+}) {
   return (
-    <StyledFigCaption
-      forwardedAs="figcaption"
-      style={
-        {
-          ...style,
-          '--size': size === 'small' ? 'var(--typeScale-0)' : 'var(--typeScale-1)',
-        } as CSSProperties
-      }
-      ref={ref}
+    <figcaption
+      className={twMerge(
+        `max-w-prose mt-2 leading-misty text-slate ${size === 'small' ? 'text-xs' : 'text-base'} figCaption`,
+        className,
+      )}
       {...rest}
     >
       {children}
-    </StyledFigCaption>
+    </figcaption>
   )
 })

web/components/src/FigureCaption/index.ts

@@ -1,4 +1,4 @@
-import { FigureCaption as FigureCaptionWrapper, FigureCaptionProps, StyledFigCaption } from './FigureCaption'
+import { FigureCaption as FigureCaptionWrapper, FigureCaptionProps } from './FigureCaption'
 import { Attribution } from './Attribution'
 import { Caption } from './Caption'
 
@@ -12,5 +12,5 @@ const FigureCaption = FigureCaptionWrapper as FigureCaptionCompoundProps
 FigureCaption.Caption = Caption
 FigureCaption.Attribution = Attribution
 
-export { FigureCaption, StyledFigCaption }
+export { FigureCaption }
 export type { FigureCaptionProps }

web/components/src/Text/Text.tsx

@@ -1,7 +1,6 @@
 import { forwardRef, HTMLAttributes, CSSProperties } from 'react'
 import { Typography, TypographyProps } from '@equinor/eds-core-react'
 import styled from 'styled-components'
-import { StyledFigCaption } from '../FigureCaption'
 
 type StyledTextProps = {
   centered?: boolean
@@ -19,7 +18,7 @@ const StyledText = styled(Typography)<StyledTextProps>`
   }
 
   /* If the text block is within a figcaption, we don't want the bottom margin */
-  ${StyledFigCaption} &:last-child {
+  .figCaption > &:last-child {
     margin-bottom: 0;
   }
 

web/pageComponents/shared/Hero/DefaultHeroImage.tsx

@@ -1,4 +1,3 @@
-import styled from 'styled-components'
 import type { ImageWithCaptionData } from '../../../types/types'
 import Image, { Ratios } from '../SanityImage'
 import { Caption } from '../image/Caption'
@@ -7,14 +6,10 @@ type HeroImageProps = {
   data: ImageWithCaptionData
 }
 
-const StyledFigure = styled.figure`
-  margin: 0;
-`
-
 const DefaulHeroImage = ({ data }: HeroImageProps) => {
   const { image, caption, attribution } = data
   return (
-    <StyledFigure>
+    <figure>
       <Image
         maxWidth={1420}
         aspectRatio={Ratios.ONE_TO_TWO}
@@ -32,7 +27,7 @@ const DefaulHeroImage = ({ data }: HeroImageProps) => {
         priority
       />
       <Caption caption={caption} attribution={attribution} />
-    </StyledFigure>
+    </figure>
   )
 }
 

web/pageComponents/shared/image/Caption.tsx

@@ -1,9 +1,11 @@
 import type { CaptionData } from 'types/types'
 import { FigureCaption } from '@components'
+import { HTMLAttributes } from 'react'
+import { twMerge } from 'tailwind-merge'
 
-export const Caption = ({ caption, attribution, ...rest }: CaptionData) => {
+export const Caption = ({ caption, attribution, className }: CaptionData & HTMLAttributes<HTMLElement>) => {
   return caption || attribution ? (
-    <FigureCaption {...rest}>
+    <FigureCaption className={className}>
       {caption && <FigureCaption.Caption>{caption}</FigureCaption.Caption>}
       {attribution && <FigureCaption.Attribution>{attribution}</FigureCaption.Attribution>}
     </FigureCaption>

web/pageComponents/shared/image/StyledCaption.tsx

@@ -1,26 +1,18 @@
 import { CaptionData } from '../../../types'
-import styled from 'styled-components'
 import { Caption } from './Caption'
 import { BackgroundContainer, BackgroundContainerProps } from '@components'
 
 type CaptionProps = CaptionData & BackgroundContainerProps
 
-const CaptionWithPadding = styled(Caption)`
-  max-width: var(--maxViewportWidth);
-  padding: 0 var(--layout-paddingHorizontal-small) var(--space-xLarge) var(--layout-paddingHorizontal-small);
-  margin-left: auto;
-  margin-right: auto;
-`
-const CaptionWrapper = styled(BackgroundContainer)`
-  display: inline-block;
-  width: 100%;
-`
-
 export const StyledCaption = ({ attribution, caption, background }: CaptionProps) => {
   return caption || attribution ? (
-    <CaptionWrapper background={background}>
-      <CaptionWithPadding attribution={attribution} caption={caption} />
-    </CaptionWrapper>
+    <BackgroundContainer className={'inline-block w-full'} background={background}>
+      <Caption
+        className={'max-w-viewport mx-auto pt-0 px-layout-sm pb-8'}
+        attribution={attribution}
+        caption={caption}
+      />
+    </BackgroundContainer>
   ) : (
     <></>
   )

web/tailwind.config.cjs

@@ -155,7 +155,9 @@ module.exports = {
       }),
       fontSize: {
         //--typeScale-00
-        xs: ['clamp(calc(11.11 / 16 * 1rem), 0.19vw + 0.65rem, calc(14.08 / 16 * 1rem))'],
+        '2xs': ['clamp(calc(11.11 / 16 * 1rem), 0.19vw + 0.65rem, calc(14.08 / 16 * 1rem))'],
+        //--typeScale-0
+        xs: ['clamp(calc(13.33 / 16 * 1rem), 0.28vw + 0.77rem, calc(17.60 / 16 * 1rem))'],
         //--typeScale-05
         sm: ['clamp(calc(14.61 / 16 * 1rem), 0.33vw + 0.84rem, calc(19.68 / 16 * 1rem))'],
         //--typeScale-1
@@ -187,6 +189,7 @@ module.exports = {
         //--lineHeight-2
         earthy: 1.2,
         //--lineHeight-2_5
+        misty: 1.25,
         cloudy: 1.35,
         //-lineHeight-3
         planetary: 1.5,