diff --git a/components/image/__tests__/browser.test.tsx b/components/image/__tests__/browser.test.tsx index 7533daa57..db6c82882 100644 --- a/components/image/__tests__/browser.test.tsx +++ b/components/image/__tests__/browser.test.tsx @@ -59,4 +59,15 @@ describe('Image Browser', () => { const wrapper = mount() expect(() => wrapper.unmount()).not.toThrow() }) + + it('anchor props should be passed through', () => { + const anchorRel = 'noreferrer' + const wrapper = mount( + + + , + ) + const rel = wrapper.find('a').getDOMNode().getAttribute('rel') + expect(anchorRel).toEqual(anchorRel) + }) }) diff --git a/components/image/image-browser.tsx b/components/image/image-browser.tsx index 14f5e1a51..ce420f93c 100644 --- a/components/image/image-browser.tsx +++ b/components/image/image-browser.tsx @@ -1,21 +1,26 @@ import React, { useMemo } from 'react' import Link from '../link' +import { Props as LinkProps } from '../link/link' import useTheme from '../styles/use-theme' import withDefaults from '../utils/with-defaults' import ImageBrowserHttpsIcon from './image-browser-https-icon' import { getBrowserColors, BrowserColors } from './styles' +type AnchorProps = Omit, keyof LinkProps> + interface Props { title?: string url?: string showFullLink?: boolean invert?: boolean + anchorProps?: AnchorProps className?: string } const defaultProps = { className: '', showFullLink: false, + anchorProps: {} as AnchorProps, invert: false, } @@ -42,12 +47,17 @@ const getTitle = (title: string, colors: BrowserColors) => ( ) -const getAddressInput = (url: string, showFullLink: boolean, colors: BrowserColors) => ( +const getAddressInput = ( + url: string, + showFullLink: boolean, + colors: BrowserColors, + anchorProps: AnchorProps, +) => (
- + {showFullLink ? url : getHostFromUrl(url)}