Merge pull request #1321 from cozy/feat/use-ref

feat: Allow `ref` in text and titles
cozy · Jan 7, 2020 · 7d38efc · 7d38efc
2 parents d64bbf2 + 47b1aae
commit 7d38efc
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 23 deletions.
diff --git a/react/Text/index.jsx b/react/Text/index.jsx
@@ -3,11 +3,12 @@ import cx from 'classnames'
 import PropTypes from 'prop-types'
 import styles from './styles.styl'
 
-export const BaseText = props => {
+export const BaseText = React.forwardRef((props, ref) => {
   const { className, children, tag, ellipsis, ...restProps } = props
   const Tag = tag
   return (
     <Tag
+      ref={ref}
       className={cx(
         {
           ['u-ellipsis']: ellipsis
@@ -19,32 +20,50 @@ export const BaseText = props => {
       {children}
     </Tag>
   )
-}
+})
 
-export const Text = ({ className, ...restProps }) => (
-  <BaseText className={cx('u-text', className)} {...restProps} />
-)
-export const MainTitle = ({ className, ...restProps }) => (
-  <BaseText className={cx('u-title-h1', className)} {...restProps} />
-)
-export const Title = ({ className, ...restProps }) => (
-  <BaseText className={cx('u-title-h2', className)} {...restProps} />
-)
-export const SubTitle = ({ className, ...restProps }) => (
-  <BaseText className={cx('u-title-h3', className)} {...restProps} />
-)
-export const Bold = ({ className, ...restProps }) => (
-  <BaseText className={cx('u-title-h4', className)} {...restProps} />
-)
-export const Uppercase = ({ className, ...restProps }) => (
-  <BaseText className={cx('u-uppercase', className)} {...restProps} />
+export const Text = React.forwardRef(({ className, ...restProps }, ref) => (
+  <BaseText className={cx('u-text', className)} {...restProps} ref={ref} />
+))
+export const MainTitle = React.forwardRef(
+  ({ className, ...restProps }, ref) => (
+    <BaseText
+      className={cx('u-title-h1', className)}
+      {...restProps}
+      ref={ref}
+    />
+  )
 )
-export const Caption = ({ className, ...restProps }) => (
-  <BaseText className={cx('u-caption', className)} {...restProps} />
+export const Title = React.forwardRef(({ className, ...restProps }, ref) => (
+  <BaseText className={cx('u-title-h2', className)} {...restProps} ref={ref} />
+))
+export const SubTitle = React.forwardRef(({ className, ...restProps }, ref) => (
+  <BaseText className={cx('u-title-h3', className)} {...restProps} ref={ref} />
+))
+export const Bold = React.forwardRef(({ className, ...restProps }, ref) => (
+  <BaseText className={cx('u-title-h4', className)} {...restProps} ref={ref} />
+))
+export const Uppercase = React.forwardRef(
+  ({ className, ...restProps }, ref) => (
+    <BaseText
+      className={cx('u-uppercase', className)}
+      {...restProps}
+      ref={ref}
+    />
+  )
 )
+export const Caption = React.forwardRef(({ className, ...restProps }, ref) => (
+  <BaseText className={cx('u-caption', className)} {...restProps} ref={ref} />
+))
 
-export const ErrorMessage = ({ className, ...restProps }) => (
-  <BaseText className={cx(styles.ErrorMessage, className)} {...restProps} />
+export const ErrorMessage = React.forwardRef(
+  ({ className, ...restProps }, ref) => (
+    <BaseText
+      className={cx(styles.ErrorMessage, className)}
+      {...restProps}
+      ref={ref}
+    />
+  )
 )
 
 // Props

diff --git a/react/Text/index.spec.jsx b/react/Text/index.spec.jsx
@@ -0,0 +1,35 @@
+import React from 'react'
+import {
+  Text,
+  MainTitle,
+  Title,
+  SubTitle,
+  Bold,
+  Uppercase,
+  Caption,
+  ErrorMessage
+} from './index'
+
+describe('Text/*', () => {
+  it('forwards ref to the HTML tag', () => {
+    const components = [
+      Text,
+      MainTitle,
+      Title,
+      SubTitle,
+      Bold,
+      Uppercase,
+      Caption,
+      ErrorMessage
+    ]
+    components.forEach(Component => {
+      const ref = React.createRef()
+      mount(
+        <div>
+          <Component tag="div" ref={ref} />
+        </div>
+      )
+      expect(ref.current).toBeInstanceOf(HTMLDivElement)
+    })
+  })
+})