/**
 * Link component.
 *
 * Site Kit by Google, Copyright 2019 Google LLC
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     https://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

/**
 * External dependencies
 */
import PropTypes from 'prop-types';
import classnames from 'classnames';

/**
 * WordPress dependencies
 */
import { _x } from '@wordpress/i18n';
import { Component } from '@wordpress/element';
import { VisuallyHidden } from '@wordpress/components';

class Link extends Component {
	render() {
		const {
			href,
			children,
			className,
			arrow,
			external,
			inverse,
			back,
			small,
			inherit,
			caps,
			danger,
			disabled,
			...extraProps
		} = this.props;
		// Note: the disabled attribute does not alter behavior of anchor tags,
		// so if disabled we force it to be a button.
		const isAnchor = href && ! disabled;
		const SemanticLink = isAnchor ? 'a' : 'button';

		return (
			<SemanticLink
				className={ classnames(
					'googlesitekit-cta-link',
					className,
					{
						'googlesitekit-cta-link--arrow': arrow,
						'googlesitekit-cta-link--external': external,
						'googlesitekit-cta-link--inverse': inverse,
						'googlesitekit-cta-link--back': back,
						'googlesitekit-cta-link--small': small,
						'googlesitekit-cta-link--inherit': inherit,
						'googlesitekit-cta-link--caps': caps,
						'googlesitekit-cta-link--danger': danger,
						'googlesitekit-cta-link--disabled': disabled,
					}
				) }
				href={ isAnchor ? href : undefined }
				target={ isAnchor && external ? '_blank' : undefined }
				rel={ external ? 'noopener noreferrer' : undefined }
				disabled={ disabled }
				{ ...extraProps }
			>
				{ children }

				{ external && (
					<VisuallyHidden as="span" className="screen-reader-text">
						{ _x( '(opens in a new tab)', 'screen reader text', 'google-site-kit' ) }
					</VisuallyHidden>
				) }
			</SemanticLink>
		);
	}
}

Link.propTypes = {
	dangerouslySetInnerHTML: PropTypes.shape( {
		__html: PropTypes.string,
	} ),
	onClick: PropTypes.func,
	href: PropTypes.string,
	children: PropTypes.oneOfType( [
		PropTypes.string.isRequired,
		PropTypes.array.isRequired,
	] ),
	className: PropTypes.string,
	arrow: PropTypes.bool,
	external: PropTypes.bool,
	inverse: PropTypes.bool,
	back: PropTypes.bool,
	small: PropTypes.bool,
	inherit: PropTypes.bool,
	caps: PropTypes.bool,
	danger: PropTypes.bool,
	disabled: PropTypes.bool,
};

Link.defaultProps = {
	dangerouslySetInnerHTML: undefined,
	onClick: null,
	href: '',
	className: '',
	arrow: false,
	external: false,
	inverse: false,
	back: false,
	small: false,
	inherit: false,
	caps: false,
	danger: false,
	disabled: false,
};

export default Link;

@@ -862,64 +862,8 @@
 nt';
-%0Aimport %7B VisuallyHidden %7D from '@wordpress/components';
 %0A%0Acl
@@ -2110,32 +2110,12 @@
 %09%09%09%3C
-VisuallyHidden as=%22
 span
-%22
  cla
@@ -2234,21 +2234,11 @@
 %09%09%3C/
-VisuallyHidde
+spa
 n%3E%0A%09

Remove the use of Gutenberg's VisuallyHidden component in favour of span tag with screen-reader-text class name.