-
Notifications
You must be signed in to change notification settings - Fork 91
/
Anchor.js
94 lines (83 loc) · 2.35 KB
/
Anchor.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
/**
* Copyright Zendesk, Inc.
*
* Use of this source code is governed under the Apache License, Version 2.0
* found at http://www.apache.org/licenses/LICENSE-2.0.
*/
import React from 'react';
import PropTypes from 'prop-types';
import styled from 'styled-components';
import classNames from 'classnames';
import ButtonStyles from '@zendeskgarden/css-buttons';
import { useKeyboardFocus } from '@zendeskgarden/container-keyboardfocus';
import { retrieveTheme, withTheme, isRtl } from '@zendeskgarden/react-theming';
import NewWindowIcon from '@zendeskgarden/svg-icons/src/12/new-window-stroke.svg';
const COMPONENT_ID = 'buttons.anchor';
export const StyledAnchor = styled.a.attrs(props => ({
'data-garden-id': COMPONENT_ID,
'data-garden-version': PACKAGE_VERSION,
className: classNames(ButtonStyles['c-btn'], ButtonStyles['c-btn--anchor'], {
// Danger styling
[ButtonStyles['c-btn--danger']]: props.danger,
// States
[ButtonStyles['is-active']]: props.active,
[ButtonStyles['is-focused']]: props.focused,
[ButtonStyles['is-hovered']]: props.hovered,
[ButtonStyles['is-selected']]: props.selected
})
}))`
${props =>
props.external &&
`
&& {
white-space: pre-wrap;
word-wrap: break-word;
}
`}
${props => retrieveTheme(COMPONENT_ID, props)};
`;
export const StyledNewWindowIcon = styled(NewWindowIcon)`
margin-bottom: -0.085em;
padding-left: 0.25em;
width: 0.85em;
height: 0.85em;
${props =>
isRtl(props) &&
`
transform: scaleX(-1);
`}
`;
/**
* Accepts all `<a>` props
*/
const Anchor = React.forwardRef((props, ref) => {
const { focused, external, children, ...other } = props;
const { getFocusProps, keyboardFocused } = useKeyboardFocus();
const rtl = isRtl(props);
return (
<StyledAnchor
{...getFocusProps({
...other,
external,
ref,
dir: rtl ? 'rtl' : undefined,
focused: focused || keyboardFocused
})}
>
{children}
{external && <StyledNewWindowIcon />}
</StyledAnchor>
);
});
Anchor.propTypes = {
/** Apply danger styling */
danger: PropTypes.bool,
focused: PropTypes.bool,
hovered: PropTypes.bool,
active: PropTypes.bool,
/* Used when the anchor navigates to an external resource */
external: PropTypes.bool,
children: PropTypes.node
};
/** @component */
export default withTheme(Anchor);