From 4bcb882d354dd8b1c46eaf2a9c144335e7ad4b37 Mon Sep 17 00:00:00 2001
From: Tobias Maier <tobias.maier@republik.ch>
Date: Fri, 17 May 2024 18:12:31 +0200
Subject: [PATCH] refactor(styleguide): bulk convert files to TS and get rid
 off deprecated APIs

---
 .../Internal/Comment/HeaderMetaLine.tsx       |  6 +-
 .../{StatementNode.js => StatementNode.tsx}   | 55 +++++++++----------
 .../Statements/{index.js => index.ts}         |  0
 .../src/components/Figure/Image.tsx           | 53 +++++++++++-------
 .../LazyLoad/{Image.js => Image.tsx}          | 31 +++++------
 .../LazyLoad/{index.js => index.tsx}          | 48 +++++++++-------
 .../{ArticleCount.js => ArticleCount.tsx}     | 26 ++++++---
 .../{Carousel.js => Carousel.tsx}             | 28 +++++-----
 .../src/components/TeaserCarousel/Context.js  | 10 ----
 .../src/components/TeaserCarousel/Context.tsx | 20 +++++++
 .../TeaserCarousel/{Format.js => Format.tsx}  | 13 ++---
 .../TeaserCarousel/{Grid.js => Grid.tsx}      |  6 +-
 .../{Headline.js => Headline.tsx}             | 55 +++++++++----------
 .../src/components/TeaserCarousel/Lead.js     | 12 ----
 .../src/components/TeaserCarousel/Lead.tsx    | 11 ++++
 .../TeaserCarousel/{Row.js => Row.tsx}        | 15 +++--
 .../{Subject.js => Subject.tsx}               | 10 ++--
 .../TeaserCarousel/{Tile.js => Tile.tsx}      | 48 ++++++++++------
 .../{TileContainer.js => TileContainer.tsx}   | 13 ++++-
 .../{constants.js => constants.ts}            |  0
 .../TeaserCarousel/{index.js => index.ts}     |  0
 21 files changed, 262 insertions(+), 198 deletions(-)
 rename packages/styleguide/src/components/Discussion/Statements/{StatementNode.js => StatementNode.tsx} (89%)
 rename packages/styleguide/src/components/Discussion/Statements/{index.js => index.ts} (100%)
 rename packages/styleguide/src/components/LazyLoad/{Image.js => Image.tsx} (74%)
 rename packages/styleguide/src/components/LazyLoad/{index.js => index.tsx} (73%)
 rename packages/styleguide/src/components/TeaserCarousel/{ArticleCount.js => ArticleCount.tsx} (83%)
 rename packages/styleguide/src/components/TeaserCarousel/{Carousel.js => Carousel.tsx} (86%)
 delete mode 100644 packages/styleguide/src/components/TeaserCarousel/Context.js
 create mode 100644 packages/styleguide/src/components/TeaserCarousel/Context.tsx
 rename packages/styleguide/src/components/TeaserCarousel/{Format.js => Format.tsx} (81%)
 rename packages/styleguide/src/components/TeaserCarousel/{Grid.js => Grid.tsx} (82%)
 rename packages/styleguide/src/components/TeaserCarousel/{Headline.js => Headline.tsx} (68%)
 delete mode 100644 packages/styleguide/src/components/TeaserCarousel/Lead.js
 create mode 100644 packages/styleguide/src/components/TeaserCarousel/Lead.tsx
 rename packages/styleguide/src/components/TeaserCarousel/{Row.js => Row.tsx} (95%)
 rename packages/styleguide/src/components/TeaserCarousel/{Subject.js => Subject.tsx} (87%)
 rename packages/styleguide/src/components/TeaserCarousel/{Tile.js => Tile.tsx} (95%)
 rename packages/styleguide/src/components/TeaserCarousel/{TileContainer.js => TileContainer.tsx} (62%)
 rename packages/styleguide/src/components/TeaserCarousel/{constants.js => constants.ts} (100%)
 rename packages/styleguide/src/components/TeaserCarousel/{index.js => index.ts} (100%)

diff --git a/packages/styleguide/src/components/Discussion/Internal/Comment/HeaderMetaLine.tsx b/packages/styleguide/src/components/Discussion/Internal/Comment/HeaderMetaLine.tsx
index 44f6709cc4..46f64e121a 100644
--- a/packages/styleguide/src/components/Discussion/Internal/Comment/HeaderMetaLine.tsx
+++ b/packages/styleguide/src/components/Discussion/Internal/Comment/HeaderMetaLine.tsx
@@ -56,10 +56,8 @@ const titleDate = (string) => dateTimeFormat(new Date(string))
 type HeaderMetaLineProps = {
   t: Formatter
   discussion: unknown
-  comment: Pick<
-    Comment,
-    'id' | 'displayAuthor' | 'createdAt' | 'updatedAt' | 'published'
-  >
+  comment: Pick<Comment, 'id' | 'displayAuthor' | 'createdAt'> &
+    Partial<Pick<Comment, 'published' | 'updatedAt'>>
   CommentLink: ComponentType<CommentLinkProps>
   isPreview?: boolean
 }
diff --git a/packages/styleguide/src/components/Discussion/Statements/StatementNode.js b/packages/styleguide/src/components/Discussion/Statements/StatementNode.tsx
similarity index 89%
rename from packages/styleguide/src/components/Discussion/Statements/StatementNode.js
rename to packages/styleguide/src/components/Discussion/Statements/StatementNode.tsx
index 14b1b2cb0c..dc2dace8b9 100644
--- a/packages/styleguide/src/components/Discussion/Statements/StatementNode.js
+++ b/packages/styleguide/src/components/Discussion/Statements/StatementNode.tsx
@@ -1,5 +1,4 @@
-import React, { useContext } from 'react'
-import PropTypes from 'prop-types'
+import React, { ComponentPropsWithoutRef, useContext } from 'react'
 import { css } from 'glamor'
 import { fontStyles, Label } from '../../Typography'
 import { useMemo } from 'react'
@@ -10,13 +9,14 @@ import { useColorContext } from '../../Colors/ColorContext'
 import { stripTag } from './helpers/tagHelper'
 import { renderCommentMdast } from '../Internal/Comment/render'
 import IconButton from '../../IconButton'
-import ActionsMenu, {
-  ActionsMenuItemPropType,
-} from '../Internal/Comment/ActionsMenu'
+import ActionsMenu, { ActionMenuItem } from '../Internal/Comment/ActionsMenu'
 import HeaderMetaLine from '../Internal/Comment/HeaderMetaLine'
 import { pxToRem } from '../../Typography/utils'
 import { DiscussionContext } from '../DiscussionContext'
 import { IconShare } from '@republik/icons'
+import { Formatter } from '../../../lib/translate'
+import { Comment } from '../Internal/Comment/types'
+import { CommentLinkProps } from '../Internal/Comment/CommentLink'
 
 const HIGHLIGHT_PADDING = 7
 
@@ -122,6 +122,26 @@ const styles = {
 
 const MockLink = (props) => <>{props.children}</>
 
+type StatementNodeProps = {
+  comment: Comment
+  t: Formatter
+  tagMappings?: Array<{
+    tag: string
+    text: string
+  }>
+  actions: {
+    handleShare: (comment: Comment) => void
+  }
+  voteActions?: Pick<
+    ComponentPropsWithoutRef<typeof VoteButtons>,
+    'handleUpVote' | 'handleDownVote' | 'handleUnVote'
+  >
+  menuItems?: ActionMenuItem[]
+  disableVoting?: boolean
+  isHighlighted?: boolean
+  CommentLink?: React.ComponentType<CommentLinkProps>
+}
+
 const StatementNode = ({
   comment,
   tagMappings = [],
@@ -132,7 +152,7 @@ const StatementNode = ({
   disableVoting = false,
   isHighlighted = false,
   CommentLink = MockLink,
-}) => {
+}: StatementNodeProps) => {
   const [colorScheme] = useColorContext()
   const { discussion } = useContext(DiscussionContext)
 
@@ -266,26 +286,3 @@ const StatementNode = ({
 }
 
 export default StatementNode
-
-StatementNode.propTypes = {
-  comment: PropTypes.object.isRequired,
-  t: PropTypes.func.isRequired,
-  tagMappings: PropTypes.arrayOf(
-    PropTypes.shape({
-      tag: PropTypes.string.isRequired,
-      text: PropTypes.string.isRequired,
-    }),
-  ),
-  actions: PropTypes.shape({
-    handleShare: PropTypes.func.isRequired,
-  }),
-  voteActions: PropTypes.shape({
-    handleUpVote: PropTypes.func.isRequired,
-    handleDownVote: PropTypes.func.isRequired,
-    handleUnVote: PropTypes.func.isRequired,
-  }),
-  menuItems: PropTypes.arrayOf(ActionsMenuItemPropType),
-  disableVoting: PropTypes.bool,
-  isHighlighted: PropTypes.bool,
-  CommentLink: PropTypes.elementType,
-}
diff --git a/packages/styleguide/src/components/Discussion/Statements/index.js b/packages/styleguide/src/components/Discussion/Statements/index.ts
similarity index 100%
rename from packages/styleguide/src/components/Discussion/Statements/index.js
rename to packages/styleguide/src/components/Discussion/Statements/index.ts
diff --git a/packages/styleguide/src/components/Figure/Image.tsx b/packages/styleguide/src/components/Figure/Image.tsx
index 902fefc3b9..eea3653328 100644
--- a/packages/styleguide/src/components/Figure/Image.tsx
+++ b/packages/styleguide/src/components/Figure/Image.tsx
@@ -53,7 +53,30 @@ const GalleryButton = ({ gallerySize, onClick }: GalleryButtonProps) => {
   )
 }
 
-const Image = (props, context) => {
+type ImageProps = {
+  src: string
+  dark?: {
+    src: string
+    srcSet?: string
+    size?: {
+      width: number
+      height: number
+    }
+  }
+  srcSet?: string
+  alt?: string
+  size?: {
+    width: number
+    height: number
+  }
+  maxWidth?: number
+  aboveTheFold?: boolean
+  enableGallery?: boolean
+  gallerySize?: number
+  attributes?: React.HTMLAttributes<HTMLImageElement>
+}
+
+const Image = (props: ImageProps, context) => {
   const {
     src,
     dark,
@@ -72,7 +95,14 @@ const Image = (props, context) => {
       ? () => context.toggleGallery(src)
       : undefined
 
-  const size = sizeProp || (sizeProp === undefined && imageSizeInfo(src))
+  const size =
+    sizeProp ||
+    ((sizeProp === undefined && imageSizeInfo(src)) as
+      | {
+          width: never
+          height: never
+        }
+      | undefined)
   let aspectRatio = size ? size.width / size.height : undefined
   if (dark?.size) {
     aspectRatio = Math.min(aspectRatio, dark.size.width / dark.size.height)
@@ -88,6 +118,7 @@ const Image = (props, context) => {
       srcSet={srcSet}
       alt={alt}
       onClick={onClick}
+      offset={0}
     />
   ) : (
     <SwitchImage
@@ -134,24 +165,6 @@ const Image = (props, context) => {
   )
 }
 
-Image.propTypes = {
-  src: PropTypes.string.isRequired,
-  dark: PropTypes.shape({
-    src: PropTypes.string.isRequired,
-    srcSet: PropTypes.string,
-  }),
-  srcSet: PropTypes.string,
-  alt: PropTypes.string,
-  size: PropTypes.shape({
-    width: PropTypes.number,
-    height: PropTypes.number,
-  }),
-  maxWidth: PropTypes.number,
-  aboveTheFold: PropTypes.bool,
-  enableGallery: PropTypes.bool,
-  gallerySize: PropTypes.number,
-}
-
 Image.contextTypes = {
   toggleGallery: PropTypes.func,
 }
diff --git a/packages/styleguide/src/components/LazyLoad/Image.js b/packages/styleguide/src/components/LazyLoad/Image.tsx
similarity index 74%
rename from packages/styleguide/src/components/LazyLoad/Image.js
rename to packages/styleguide/src/components/LazyLoad/Image.tsx
index 2b532586ed..2440dfd208 100644
--- a/packages/styleguide/src/components/LazyLoad/Image.js
+++ b/packages/styleguide/src/components/LazyLoad/Image.tsx
@@ -1,8 +1,7 @@
 import React from 'react'
 import { css } from 'glamor'
-import PropTypes from 'prop-types'
 
-import LazyLoad from './'
+import LazyLoad from '.'
 
 import SwitchImage from '../Figure/SwitchImage'
 
@@ -20,6 +19,17 @@ const styles = {
 
 const transparentExtension = /\.(png|gif|svg)(\.webp)?(\?|$)/
 
+type LazyImageProps = {
+  aspectRatio: number
+} & Pick<
+  React.ComponentPropsWithoutRef<typeof SwitchImage>,
+  'src' | 'dark' | 'srcSet' | 'sizes' | 'alt' | 'onClick'
+> &
+  Pick<
+    React.ComponentPropsWithoutRef<typeof LazyLoad>,
+    'attributes' | 'visible' | 'offset'
+  >
+
 const LazyImage = ({
   src,
   dark,
@@ -31,7 +41,7 @@ const LazyImage = ({
   visible,
   offset,
   onClick,
-}) => {
+}: LazyImageProps) => {
   return (
     <LazyLoad
       attributes={{ ...styles.container, ...attributes }}
@@ -63,19 +73,4 @@ const LazyImage = ({
   )
 }
 
-LazyImage.propTypes = {
-  src: PropTypes.string.isRequired,
-  dark: PropTypes.shape({
-    src: PropTypes.string.isRequired,
-  }),
-  srcSet: PropTypes.string,
-  sizes: PropTypes.string,
-  alt: PropTypes.string,
-  aspectRatio: PropTypes.number.isRequired,
-  attributes: PropTypes.object,
-  visible: PropTypes.bool,
-  offset: PropTypes.number,
-  onClick: PropTypes.func,
-}
-
 export default LazyImage
diff --git a/packages/styleguide/src/components/LazyLoad/index.js b/packages/styleguide/src/components/LazyLoad/index.tsx
similarity index 73%
rename from packages/styleguide/src/components/LazyLoad/index.js
rename to packages/styleguide/src/components/LazyLoad/index.tsx
index 00a64a3c3c..92b7e4ef1a 100644
--- a/packages/styleguide/src/components/LazyLoad/index.js
+++ b/packages/styleguide/src/components/LazyLoad/index.tsx
@@ -1,5 +1,4 @@
 import React, { Component } from 'react'
-import PropTypes from 'prop-types'
 import { rafDebounce } from '../../lib/helpers'
 import debounce from 'lodash/debounce'
 
@@ -57,14 +56,33 @@ const instances = {
   all: [],
 }
 
-class LazyLoad extends Component {
-  constructor(...args) {
-    super(...args)
+type LazyLoadProps<T = unknown> = {
+  children: React.ReactNode
+  attributes: Partial<T>
+  style: React.CSSProperties
+  type: React.ElementType<T>
+  visible: boolean
+  offset?: number
+  consistentPlaceholder: boolean
+}
+
+type LazyLoadState = {
+  visible?: boolean
+}
+
+class LazyLoad<T> extends Component<LazyLoadProps<T>, LazyLoadState> {
+  constructor(props) {
+    super(props)
     this.state = {}
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
     this.setRef = (ref) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       this.ref = ref
     }
   }
+
   componentDidMount() {
     instances.add(this)
   }
@@ -84,6 +102,8 @@ class LazyLoad extends Component {
       return <>{children}</>
     }
     return (
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
       <Element ref={this.setRef} {...attributes} style={style}>
         {visible ? (
           children
@@ -93,22 +113,12 @@ class LazyLoad extends Component {
       </Element>
     )
   }
-}
-
-LazyLoad.propTypes = {
-  children: PropTypes.node,
-  attributes: PropTypes.object,
-  style: PropTypes.object,
-  type: PropTypes.elementType,
-  visible: PropTypes.bool,
-  offset: PropTypes.number,
-  consistentPlaceholder: PropTypes.bool,
-}
 
-LazyLoad.defaultProps = {
-  offset: 0.5,
-  type: 'div',
-  consistentPlaceholder: false,
+  static defaultProps: Partial<LazyLoadProps<unknown>> = {
+    offset: 0.5,
+    type: 'div',
+    consistentPlaceholder: false,
+  }
 }
 
 export default LazyLoad
diff --git a/packages/styleguide/src/components/TeaserCarousel/ArticleCount.js b/packages/styleguide/src/components/TeaserCarousel/ArticleCount.tsx
similarity index 83%
rename from packages/styleguide/src/components/TeaserCarousel/ArticleCount.js
rename to packages/styleguide/src/components/TeaserCarousel/ArticleCount.tsx
index 730560fa8f..e65bb9059b 100644
--- a/packages/styleguide/src/components/TeaserCarousel/ArticleCount.js
+++ b/packages/styleguide/src/components/TeaserCarousel/ArticleCount.tsx
@@ -1,12 +1,16 @@
 import { css } from 'glamor'
 import React from 'react'
 import { sansSerifMedium16 } from '../Typography/styles'
-import PropTypes from 'prop-types'
 import { useColorContext } from '../Colors/useColorContext'
 
 const ICON_SIZE = 29
 
-const Icon = ({ size, fill, ...props }) => (
+type IconProps = React.ComponentPropsWithoutRef<'svg'> & {
+  size: number
+  fill?: string
+}
+
+const Icon = ({ size, fill, ...props }: IconProps) => (
   <svg
     {...styles.icon}
     width={`${size}px`}
@@ -50,7 +54,17 @@ const styles = {
   }),
 }
 
-const ArticleCount = ({ count, bgColor, color: textColor }) => {
+type ArticleCountProps = {
+  count: number
+  bgColor: string
+  color: string
+}
+
+const ArticleCount = ({
+  count,
+  bgColor,
+  color: textColor,
+}: ArticleCountProps) => {
   const [colorScheme] = useColorContext()
   return (
     <div {...styles.container}>
@@ -63,9 +77,3 @@ const ArticleCount = ({ count, bgColor, color: textColor }) => {
 }
 
 export default ArticleCount
-
-ArticleCount.propTypes = {
-  bgColor: PropTypes.string,
-  color: PropTypes.string,
-  count: PropTypes.number,
-}
diff --git a/packages/styleguide/src/components/TeaserCarousel/Carousel.js b/packages/styleguide/src/components/TeaserCarousel/Carousel.tsx
similarity index 86%
rename from packages/styleguide/src/components/TeaserCarousel/Carousel.js
rename to packages/styleguide/src/components/TeaserCarousel/Carousel.tsx
index 253b6c8767..d8c192c4c1 100644
--- a/packages/styleguide/src/components/TeaserCarousel/Carousel.js
+++ b/packages/styleguide/src/components/TeaserCarousel/Carousel.tsx
@@ -19,17 +19,29 @@ const styles = {
   }),
 }
 
+type CarouselProps = {
+  bgColor?: string
+  color?: string
+  outline: string | boolean
+  bigger: boolean
+  children: React.ReactNode
+  tileCount: number
+  article?: boolean
+  grid?: boolean
+  isSeriesNav?: boolean
+}
+
 export const Carousel = ({
   bigger,
   children,
   tileCount: tileCountFromProps,
   article,
   outline,
-  bgColor,
-  color,
+  bgColor = defaultValue.bgColor,
+  color = defaultValue.color,
   grid,
   isSeriesNav,
-}) => {
+}: CarouselProps) => {
   const [colorScheme] = useColorContext()
   const row = children && children[1]
   const tileCount =
@@ -85,13 +97,3 @@ export const Carousel = ({
 }
 
 export default React.memo(Carousel)
-
-Carousel.propTypes = {
-  bgColor: PropTypes.string,
-  color: PropTypes.string,
-  outline: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]),
-  bigger: PropTypes.bool,
-  children: PropTypes.node,
-}
-
-Carousel.defaultProps = defaultValue
diff --git a/packages/styleguide/src/components/TeaserCarousel/Context.js b/packages/styleguide/src/components/TeaserCarousel/Context.js
deleted file mode 100644
index 3c0e83a0c5..0000000000
--- a/packages/styleguide/src/components/TeaserCarousel/Context.js
+++ /dev/null
@@ -1,10 +0,0 @@
-import React from 'react'
-
-export const defaultValue = {
-  bgColor: 'default',
-  color: 'text',
-}
-
-const CarouselContext = React.createContext(defaultValue)
-
-export default CarouselContext
diff --git a/packages/styleguide/src/components/TeaserCarousel/Context.tsx b/packages/styleguide/src/components/TeaserCarousel/Context.tsx
new file mode 100644
index 0000000000..d144818ec2
--- /dev/null
+++ b/packages/styleguide/src/components/TeaserCarousel/Context.tsx
@@ -0,0 +1,20 @@
+import React from 'react'
+
+type CarouselContext = Partial<{
+  bigger
+  outline
+  bgColor
+  color
+  tileCount
+  tileMaxWidth
+  grid
+}>
+
+export const defaultValue = {
+  bgColor: 'default',
+  color: 'text',
+}
+
+const CarouselContext = React.createContext<CarouselContext>(defaultValue)
+
+export default CarouselContext
diff --git a/packages/styleguide/src/components/TeaserCarousel/Format.js b/packages/styleguide/src/components/TeaserCarousel/Format.tsx
similarity index 81%
rename from packages/styleguide/src/components/TeaserCarousel/Format.js
rename to packages/styleguide/src/components/TeaserCarousel/Format.tsx
index 359c49b8b4..68db33d980 100644
--- a/packages/styleguide/src/components/TeaserCarousel/Format.js
+++ b/packages/styleguide/src/components/TeaserCarousel/Format.tsx
@@ -1,5 +1,4 @@
 import { css } from 'glamor'
-import PropTypes from 'prop-types'
 import React from 'react'
 import { sansSerifMedium14 } from '../Typography/styles'
 import { useColorContext } from '../Colors/useColorContext'
@@ -10,7 +9,12 @@ const styles = css({
   margin: '0 0 10px 0',
 })
 
-const Format = ({ children, color }) => {
+type FormatProps = {
+  children: React.ReactNode
+  color?: string
+}
+
+const Format = ({ children, color }: FormatProps) => {
   const context = React.useContext(CarouselContext)
   const mapping = context.color === defaultValue.color ? 'format' : undefined
   const textColor = color || context.color
@@ -23,8 +27,3 @@ const Format = ({ children, color }) => {
 }
 
 export default Format
-
-Format.propTypes = {
-  children: PropTypes.node,
-  color: PropTypes.string,
-}
diff --git a/packages/styleguide/src/components/TeaserCarousel/Grid.js b/packages/styleguide/src/components/TeaserCarousel/Grid.tsx
similarity index 82%
rename from packages/styleguide/src/components/TeaserCarousel/Grid.js
rename to packages/styleguide/src/components/TeaserCarousel/Grid.tsx
index dd2f9ab6c7..887fdce0dc 100644
--- a/packages/styleguide/src/components/TeaserCarousel/Grid.js
+++ b/packages/styleguide/src/components/TeaserCarousel/Grid.tsx
@@ -13,7 +13,11 @@ const styles = {
   }),
 }
 
-const Grid = ({ children }) => {
+type GridProps = {
+  children: React.ReactNode
+}
+
+const Grid = ({ children }: GridProps) => {
   return (
     <div role='group' {...styles.container}>
       {children}
diff --git a/packages/styleguide/src/components/TeaserCarousel/Headline.js b/packages/styleguide/src/components/TeaserCarousel/Headline.tsx
similarity index 68%
rename from packages/styleguide/src/components/TeaserCarousel/Headline.js
rename to packages/styleguide/src/components/TeaserCarousel/Headline.tsx
index d42b4ddd62..7e37fbc425 100644
--- a/packages/styleguide/src/components/TeaserCarousel/Headline.js
+++ b/packages/styleguide/src/components/TeaserCarousel/Headline.tsx
@@ -1,5 +1,4 @@
 import { css } from 'glamor'
-import PropTypes from 'prop-types'
 import React from 'react'
 import { fontStyles } from '../../theme/fonts'
 import CarouselContext from './Context'
@@ -26,7 +25,15 @@ const styles = {
   bigger: css({ fontSize: 28, lineHeight: '28px' }),
 }
 
-export const Editorial = ({ children, bigger: biggerProp }) => {
+type EditorialProps = {
+  children: React.ReactNode
+  bigger?: boolean
+}
+
+export const Editorial = ({
+  children,
+  bigger: biggerProp = false,
+}: EditorialProps) => {
   const context = React.useContext(CarouselContext)
   const bigger = biggerProp || context.bigger
 
@@ -39,7 +46,15 @@ export const Editorial = ({ children, bigger: biggerProp }) => {
   return <h1 {...headlineStyles}>{children}</h1>
 }
 
-export const Interaction = ({ children, bigger: biggerProp }) => {
+type InteractionProps = {
+  children: React.ReactNode
+  bigger?: boolean
+}
+
+export const Interaction = ({
+  children,
+  bigger: biggerProp = false,
+}: InteractionProps) => {
   const context = React.useContext(CarouselContext)
   const bigger = biggerProp || context.bigger
 
@@ -51,7 +66,15 @@ export const Interaction = ({ children, bigger: biggerProp }) => {
   return <h1 {...headlineStyles}>{children}</h1>
 }
 
-export const Scribble = ({ children, bigger: biggerProp }) => {
+type ScribbleProps = {
+  children: React.ReactNode
+  bigger?: boolean
+}
+
+export const Scribble = ({
+  children,
+  bigger: biggerProp = false,
+}: ScribbleProps) => {
   const context = React.useContext(CarouselContext)
   const bigger = biggerProp || context.bigger
 
@@ -62,27 +85,3 @@ export const Scribble = ({ children, bigger: biggerProp }) => {
   )
   return <h1 {...headlineStyles}>{children}</h1>
 }
-
-Editorial.propTypes = {
-  children: PropTypes.node,
-  bigger: PropTypes.bool,
-}
-Editorial.defaultProps = {
-  bigger: false,
-}
-
-Interaction.propTypes = {
-  children: PropTypes.node,
-  bigger: PropTypes.bool,
-}
-Interaction.defaultProps = {
-  bigger: false,
-}
-
-Scribble.propTypes = {
-  children: PropTypes.node,
-  bigger: PropTypes.bool,
-}
-Scribble.defaultProps = {
-  bigger: false,
-}
diff --git a/packages/styleguide/src/components/TeaserCarousel/Lead.js b/packages/styleguide/src/components/TeaserCarousel/Lead.js
deleted file mode 100644
index fab31d5192..0000000000
--- a/packages/styleguide/src/components/TeaserCarousel/Lead.js
+++ /dev/null
@@ -1,12 +0,0 @@
-import PropTypes from 'prop-types'
-import React from 'react'
-
-const Lead = ({ children }) => {
-  return <span>{children}</span>
-}
-
-Lead.propTypes = {
-  children: PropTypes.node,
-}
-
-export default Lead
diff --git a/packages/styleguide/src/components/TeaserCarousel/Lead.tsx b/packages/styleguide/src/components/TeaserCarousel/Lead.tsx
new file mode 100644
index 0000000000..950339c80e
--- /dev/null
+++ b/packages/styleguide/src/components/TeaserCarousel/Lead.tsx
@@ -0,0 +1,11 @@
+import React from 'react'
+
+type LeadProps = {
+  children: React.ReactNode
+}
+
+const Lead = ({ children }: LeadProps) => {
+  return <span>{children}</span>
+}
+
+export default Lead
diff --git a/packages/styleguide/src/components/TeaserCarousel/Row.js b/packages/styleguide/src/components/TeaserCarousel/Row.tsx
similarity index 95%
rename from packages/styleguide/src/components/TeaserCarousel/Row.js
rename to packages/styleguide/src/components/TeaserCarousel/Row.tsx
index d3e449c491..caab2a4516 100644
--- a/packages/styleguide/src/components/TeaserCarousel/Row.js
+++ b/packages/styleguide/src/components/TeaserCarousel/Row.tsx
@@ -1,3 +1,4 @@
+import React from 'react'
 import { css } from 'glamor'
 import PropTypes from 'prop-types'
 import { useRef, useState, useContext, useEffect } from 'react'
@@ -73,9 +74,15 @@ const styles = {
   }),
 }
 
-const Row = ({ initialScrollTileIndex, children, isSeriesNav }) => {
+type RowProps = {
+  children: React.ReactNode
+  initialScrollTileIndex: number
+  isSeriesNav?: boolean
+}
+
+const Row = ({ initialScrollTileIndex, children, isSeriesNav }: RowProps) => {
   const context = useContext(CarouselContext)
-  const overflow = useRef()
+  const overflow = useRef<HTMLDivElement>(null)
   const [{ left, right }, setArrows] = useState({ left: false, right: false })
   const [colorScheme] = useColorContext()
 
@@ -218,7 +225,3 @@ const Row = ({ initialScrollTileIndex, children, isSeriesNav }) => {
 }
 
 export default Row
-
-Row.propTypes = {
-  children: PropTypes.node,
-}
diff --git a/packages/styleguide/src/components/TeaserCarousel/Subject.js b/packages/styleguide/src/components/TeaserCarousel/Subject.tsx
similarity index 87%
rename from packages/styleguide/src/components/TeaserCarousel/Subject.js
rename to packages/styleguide/src/components/TeaserCarousel/Subject.tsx
index 2833c3d60e..a0d220c255 100644
--- a/packages/styleguide/src/components/TeaserCarousel/Subject.js
+++ b/packages/styleguide/src/components/TeaserCarousel/Subject.tsx
@@ -15,7 +15,11 @@ const styles = css({
   },
 })
 
-const Subject = ({ children }) => {
+type SubjectProps = {
+  children: React.ReactNode
+}
+
+const Subject = ({ children }: SubjectProps) => {
   const [colorScheme] = useColorContext()
   const customStyles = css(styles, {
     '&::after': {
@@ -30,7 +34,3 @@ const Subject = ({ children }) => {
 }
 
 export default Subject
-
-Subject.propTypes = {
-  children: PropTypes.node,
-}
diff --git a/packages/styleguide/src/components/TeaserCarousel/Tile.js b/packages/styleguide/src/components/TeaserCarousel/Tile.tsx
similarity index 95%
rename from packages/styleguide/src/components/TeaserCarousel/Tile.js
rename to packages/styleguide/src/components/TeaserCarousel/Tile.tsx
index 6d5dcea67b..ae68bd285f 100644
--- a/packages/styleguide/src/components/TeaserCarousel/Tile.js
+++ b/packages/styleguide/src/components/TeaserCarousel/Tile.tsx
@@ -114,6 +114,37 @@ const styles = {
   }),
 }
 
+Tile.propTypes = {
+  bigger: PropTypes.bool,
+  color: PropTypes.string,
+  bgColor: PropTypes.string,
+  outline: PropTypes.string,
+  count: PropTypes.number,
+  image: PropTypes.string,
+  alt: PropTypes.string,
+  onClick: PropTypes.func,
+  aboveTheFold: PropTypes.bool,
+  byline: PropTypes.string,
+  children: PropTypes.node,
+  audioPlayButton: PropTypes.node,
+}
+
+type TileProps = {
+  children: React.ReactNode
+  count?: number
+  image?: string
+  imageDark?: string
+  color?: string
+  bgColor?: string
+  outline?: string
+  bigger?: boolean
+  alt?: string
+  onClick?: () => void
+  aboveTheFold?: boolean
+  byline?: string
+  audioPlayButton?: React.ReactNode
+}
+
 const Tile = ({
   count,
   image,
@@ -128,7 +159,7 @@ const Tile = ({
   outline: tileOutlineColor,
   bigger: tileBigger,
   audioPlayButton,
-}) => {
+}: TileProps) => {
   const [colorScheme] = useColorContext()
   const context = React.useContext(CarouselContext)
 
@@ -238,18 +269,3 @@ const Tile = ({
   )
 }
 export default Tile
-
-Tile.propTypes = {
-  bigger: PropTypes.bool,
-  color: PropTypes.string,
-  bgColor: PropTypes.string,
-  outline: PropTypes.string,
-  count: PropTypes.number,
-  image: PropTypes.string,
-  alt: PropTypes.string,
-  onClick: PropTypes.func,
-  aboveTheFold: PropTypes.bool,
-  byline: PropTypes.string,
-  children: PropTypes.node,
-  audioPlayButton: PropTypes.node,
-}
diff --git a/packages/styleguide/src/components/TeaserCarousel/TileContainer.js b/packages/styleguide/src/components/TeaserCarousel/TileContainer.tsx
similarity index 62%
rename from packages/styleguide/src/components/TeaserCarousel/TileContainer.js
rename to packages/styleguide/src/components/TeaserCarousel/TileContainer.tsx
index 9c45e4bdf9..a7904cdcf2 100644
--- a/packages/styleguide/src/components/TeaserCarousel/TileContainer.js
+++ b/packages/styleguide/src/components/TeaserCarousel/TileContainer.tsx
@@ -4,7 +4,18 @@ import CarouselContext from './Context'
 import Grid from './Grid'
 import Row from './Row'
 
-const Container = ({ initialScrollTileIndex, children, isSeriesNav }) => {
+type ContainerProps = {
+  children: React.ReactNode
+} & Pick<
+  React.ComponentPropsWithoutRef<typeof Row>,
+  'initialScrollTileIndex' | 'isSeriesNav'
+>
+
+const Container = ({
+  initialScrollTileIndex,
+  children,
+  isSeriesNav,
+}: ContainerProps) => {
   const context = useContext(CarouselContext)
   if (context.grid) {
     return <Grid>{children}</Grid>
diff --git a/packages/styleguide/src/components/TeaserCarousel/constants.js b/packages/styleguide/src/components/TeaserCarousel/constants.ts
similarity index 100%
rename from packages/styleguide/src/components/TeaserCarousel/constants.js
rename to packages/styleguide/src/components/TeaserCarousel/constants.ts
diff --git a/packages/styleguide/src/components/TeaserCarousel/index.js b/packages/styleguide/src/components/TeaserCarousel/index.ts
similarity index 100%
rename from packages/styleguide/src/components/TeaserCarousel/index.js
rename to packages/styleguide/src/components/TeaserCarousel/index.ts