import { getComponentOverviewUrl } from '../../../../helpers/urls';
import { BranchLike } from '../../../../types/branch-like';
import { Component } from '../../../../types/types';
+import { colors } from '../../../theme';
export interface BreadcrumbProps {
component: Component;
currentBranchLike
} = props;
const lastBreadcrumbElement = last(breadcrumbs);
- const isNoMainBranch = currentBranchLike && !isMainBranch(currentBranchLike);
+ const isNotMainBranch = currentBranchLike && !isMainBranch(currentBranchLike);
return (
<div className="big flex-shrink display-flex-center">
{breadcrumbs.map((breadcrumbElement, i) => {
const isFirst = i === 0;
const isNotLast = i < breadcrumbs.length - 1;
+ const isLast = !isNotLast;
+ const showQualifierIcon = isFirst && lastBreadcrumbElement;
+
+ const name =
+ isNotMainBranch || isNotLast ? (
+ <>
+ {showQualifierIcon && !isNotMainBranch && (
+ <QualifierIcon
+ className="spacer-right"
+ qualifier={lastBreadcrumbElement.qualifier}
+ fill={colors.neutral800}
+ />
+ )}
+ <Link
+ className="link-no-underline"
+ to={getComponentOverviewUrl(breadcrumbElement.key, breadcrumbElement.qualifier)}>
+ {showQualifierIcon && isNotMainBranch && (
+ <QualifierIcon
+ className="spacer-right"
+ qualifier={lastBreadcrumbElement.qualifier}
+ fill={colors.primary}
+ />
+ )}
+ {breadcrumbElement.name}
+ </Link>
+ </>
+ ) : (
+ <>
+ {showQualifierIcon && (
+ <QualifierIcon
+ className="spacer-right"
+ qualifier={lastBreadcrumbElement.qualifier}
+ fill={colors.neutral800}
+ />
+ )}
+ {breadcrumbElement.name}
+ </>
+ );
return (
<span className="flex-shrink display-flex-center" key={breadcrumbElement.key}>
- {isFirst && lastBreadcrumbElement && (
- <QualifierIcon className="spacer-right" qualifier={lastBreadcrumbElement.qualifier} />
- )}
- {isNoMainBranch || isNotLast ? (
- <h1>
- <Link
- className="link-no-underline text-ellipsis"
- title={breadcrumbElement.name}
- to={getComponentOverviewUrl(breadcrumbElement.key, breadcrumbElement.qualifier)}>
- {breadcrumbElement.name}
- </Link>
- </h1>
- ) : (
+ {isLast ? (
<h1 className="text-ellipsis" title={breadcrumbElement.name}>
- {breadcrumbElement.name}
+ {name}
</h1>
+ ) : (
+ <span className="text-ellipsis" title={breadcrumbElement.name}>
+ {name}
+ </span>
)}
{isNotLast && <span className="slash-separator" />}
</span>
}
const ALERT_HEIGHT = 30;
+const BRANCHLIKE_TOGGLE_ADDED_HEIGHT = 6;
export default function ComponentNav(props: ComponentNavProps) {
const {
contextNavHeight += ALERT_HEIGHT;
}
+ if (branchLikes.length) {
+ contextNavHeight += BRANCHLIKE_TOGGLE_ADDED_HEIGHT;
+ }
+
return (
<ContextNavBar
height={contextNavHeight}
<InfoDrawer
displayed={displayProjectInfo}
onClose={() => setDisplayProjectInfo(false)}
- top={globalNavHeightRaw + contextNavHeightRaw}>
+ top={globalNavHeightRaw + contextNavHeight}>
<ProjectInformation
branchLike={currentBranchLike}
component={component}
return (
<>
<Helmet title={component.name} />
- <header className="display-flex-center flex-shrink">
+ <div className="display-flex-center flex-shrink">
<Breadcrumb component={component} currentBranchLike={currentBranchLike} />
{isLoggedIn(currentUser) && (
<Favorite
<CurrentBranchLikeMergeInformation currentBranchLike={currentBranchLike} />
</>
)}
- </header>
+ </div>
</>
);
}
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
.header-meta-warnings .alert {
- margin-bottom: 0;
+ margin-bottom: 5px;
}
.header-meta-warnings .alert-content {
});
it('should render correctly when not on a main branch', () => {
- renderBreadcrumb({ currentBranchLike: mockBranch() });
- expect(screen.getByRole('link', { name: 'Child portfolio' })).toBeInTheDocument();
+ renderBreadcrumb({
+ component: mockComponent({
+ breadcrumbs: [
+ {
+ key: 'project',
+ name: 'My Project',
+ qualifier: ComponentQualifier.Project
+ }
+ ]
+ }),
+ currentBranchLike: mockBranch()
+ });
+ expect(
+ screen.getByRole('link', { name: `qualifier.${ComponentQualifier.Project} My Project` })
+ ).toBeInTheDocument();
});
function renderBreadcrumb(props: Partial<BreadcrumbProps> = {}) {
prioritizeSeoTags={false}
title="MyProject"
/>
- <header
+ <div
className="display-flex-center flex-shrink"
>
<Breadcrumb
}
}
/>
- </header>
+ </div>
</Fragment>
`;
* along with this program; if not, write to the Free Software Foundation,
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
+.branch-like-navigation-toggler {
+ padding: 4px 8px;
+ border: 1px solid transparent;
+ border-radius: 2px;
+}
+
+.branch-like-navigation-toggler:hover {
+ border-color: var(--black38);
+ color: inherit !important;
+}
+
+.branch-like-navigation-toggler:active,
+.branch-like-navigation-toggler.open {
+ border-color: var(--primary);
+}
+
+.branch-like-navigation-toggler-container {
+ height: 26px;
+}
+
.branch-like-navigation-toggler-container .popup {
min-width: 430px;
max-width: 650px;
*/
import classNames from 'classnames';
import * as React from 'react';
+import { ButtonPlain } from '../../../../../components/controls/buttons';
import Toggler from '../../../../../components/controls/Toggler';
import { ProjectAlmBindingResponse } from '../../../../../types/alm-settings';
import { AppState } from '../../../../../types/appstate';
return (
<span
- className={classNames('big-spacer-left flex-0 branch-like-navigation-toggler-container', {
- dropdown: isMenuEnabled
- })}>
+ className={classNames(
+ 'big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center',
+ {
+ dropdown: isMenuEnabled
+ }
+ )}>
{isMenuEnabled ? (
<Toggler
onRequestClose={() => setIsMenuOpen(false)}
onClose={() => setIsMenuOpen(false)}
/>
}>
- <a
- className="link-base-color link-no-underline"
- href="#"
- onClick={() => setIsMenuOpen(!isMenuOpen)}>
+ <ButtonPlain
+ className={classNames('branch-like-navigation-toggler', { open: isMenuOpen })}
+ onClick={() => setIsMenuOpen(!isMenuOpen)}
+ aria-expanded={isMenuOpen}
+ aria-haspopup="menu">
{currentBranchLikeElement}
- </a>
+ </ButtonPlain>
</Toggler>
) : (
currentBranchLikeElement
const isGitLab = projectBinding !== undefined && projectBinding.alm === AlmKeys.GitLab;
const additionalIcon = () => {
- const plusIcon = <PlusCircleIcon fill={colors.blue} size={12} />;
-
if (branchesEnabled && hasManyBranches) {
return <DropdownIcon />;
}
+ const plusIcon = <PlusCircleIcon fill={colors.info500} size={12} />;
+
if (isApplication) {
if (!hasManyBranches && canAdminComponent) {
return (
return (
<span className="display-flex-center flex-shrink text-ellipsis">
- <BranchLikeIcon branchLike={currentBranchLike} />
+ <BranchLikeIcon branchLike={currentBranchLike} fill={colors.info500} />
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
title={displayName}>
*/
import { shallow } from 'enzyme';
import * as React from 'react';
+import { ButtonPlain } from '../../../../../../components/controls/buttons';
import Toggler from '../../../../../../components/controls/Toggler';
import { mockSetOfBranchAndPullRequest } from '../../../../../../helpers/mocks/branch-like';
import { mockComponent } from '../../../../../../helpers/mocks/component';
const wrapper = shallowRender({ appState: mockAppState({ branchesEnabled: true }) });
expect(wrapper.find(Toggler).props().open).toBe(false);
- click(wrapper.find('a'));
+ click(wrapper.find(ButtonPlain));
expect(wrapper.find(Toggler).props().open).toBe(true);
- click(wrapper.find('a'));
+ click(wrapper.find(ButtonPlain));
expect(wrapper.find(Toggler).props().open).toBe(false);
});
const wrapper = shallowRender({ appState: mockAppState({ branchesEnabled: true }) });
expect(wrapper.find(Toggler).props().open).toBe(false);
- click(wrapper.find('a'));
+ click(wrapper.find(ButtonPlain));
expect(wrapper.find(Toggler).props().open).toBe(true);
wrapper
exports[`should render correctly 1`] = `
<span
- className="big-spacer-left flex-0 branch-like-navigation-toggler-container"
+ className="big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center"
>
<Memo(CurrentBranchLike)
branchesEnabled={false}
exports[`should render the menu trigger if branches are enabled 1`] = `
<span
- className="big-spacer-left flex-0 branch-like-navigation-toggler-container dropdown"
+ className="big-spacer-left flex-0 branch-like-navigation-toggler-container display-flex-center dropdown"
>
<Toggler
onRequestClose={[Function]}
/>
}
>
- <a
- className="link-base-color link-no-underline"
- href="#"
+ <ButtonPlain
+ aria-expanded={false}
+ aria-haspopup="menu"
+ className="branch-like-navigation-toggler"
onClick={[Function]}
>
<Memo(CurrentBranchLike)
}
hasManyBranches={true}
/>
- </a>
+ </ButtonPlain>
</Toggler>
</span>
`;
"name": "master",
}
}
+ fill="#0271B9"
/>
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
"name": "master",
}
}
+ fill="#0271B9"
/>
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
"name": "master",
}
}
+ fill="#0271B9"
/>
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
}
>
<PlusCircleIcon
- fill="#4b9fd5"
+ fill="#0271B9"
size={12}
/>
</HelpTooltip>
"name": "master",
}
}
+ fill="#0271B9"
/>
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
title="branch_like_navigation.no_branch_support.title.mr"
>
<PlusCircleIcon
- fill="#4b9fd5"
+ fill="#0271B9"
size={12}
/>
</DocumentationTooltip>
"name": "master",
}
}
+ fill="#0271B9"
/>
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
title="branch_like_navigation.no_branch_support.title.pr"
>
<PlusCircleIcon
- fill="#4b9fd5"
+ fill="#0271B9"
size={12}
/>
</DocumentationTooltip>
"name": "master",
}
}
+ fill="#0271B9"
/>
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
title="branch_like_navigation.no_branch_support.title"
>
<PlusCircleIcon
- fill="#4b9fd5"
+ fill="#0271B9"
size={12}
/>
</DocumentationTooltip>
"name": "master",
}
}
+ fill="#0271B9"
/>
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
"name": "master",
}
}
+ fill="#0271B9"
/>
<span
className="spacer-left spacer-right flex-shrink text-ellipsis js-branch-like-name"
title="branch_like_navigation.only_one_branch.title"
>
<PlusCircleIcon
- fill="#4b9fd5"
+ fill="#0271B9"
size={12}
/>
</DocumentationTooltip>
return (
<li>
<a
- className="link-with-icon"
+ className="link-no-underline"
href={isValid ? link.url : undefined}
onClick={isValid ? undefined : this.handleClick}
rel="nofollow noreferrer noopener"
exports[`should match snapshot: dangerous link, collapsed 1`] = `
<li>
<a
- className="link-with-icon"
+ className="link-no-underline"
onClick={[Function]}
rel="nofollow noreferrer noopener"
target="_blank"
exports[`should match snapshot: dangerous link, expanded 1`] = `
<li>
<a
- className="link-with-icon"
+ className="link-no-underline"
onClick={[Function]}
rel="nofollow noreferrer noopener"
target="_blank"
exports[`should match snapshot: default 1`] = `
<li>
<a
- className="link-with-icon"
+ className="link-no-underline"
href="http://example.com"
rel="nofollow noreferrer noopener"
target="_blank"
exports[`should match snapshot: icon only 1`] = `
<li>
<a
- className="link-with-icon"
+ className="link-no-underline"
href="http://example.com"
rel="nofollow noreferrer noopener"
target="_blank"
systemStatus: SysStatus;
}
+const ALERT_HEIGHT = 30;
+
export class SettingsNav extends React.PureComponent<Props> {
static defaultProps = {
extensions: []
return (
<ContextNavBar
- height={notifComponent ? contextNavHeight + 30 : contextNavHeight}
+ height={notifComponent ? contextNavHeight + ALERT_HEIGHT : contextNavHeight}
id="context-navigation"
notif={notifComponent}>
- <header className="navbar-context-header">
+ <div className="navbar-context-header">
<h1>{translate('layout.settings')}</h1>
- </header>
+ </div>
<NavBarTabs>
{this.renderConfigurationTab()}
height={72}
id="context-navigation"
>
- <header
+ <div
className="navbar-context-header"
>
<h1>
layout.settings
</h1>
- </header>
+ </div>
<NavBarTabs>
<Dropdown
overlay={
height={72}
id="context-navigation"
>
- <header
+ <div
className="navbar-context-header"
>
<h1>
layout.settings
</h1>
- </header>
+ </div>
<NavBarTabs>
<Dropdown
overlay={
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
a {
- border-bottom: 1px solid var(--lightBlue);
- color: var(--darkBlue);
+ border-bottom: 1px solid var(--primary40);
+ color: var(--primary);
cursor: pointer;
outline: none;
text-decoration: none;
a:hover,
a:active,
a:focus {
- color: var(--blue);
-}
-
-.link-base-color {
- border-bottom: 1px solid #d0d0d0 !important;
- color: var(--baseFontColor) !important;
-}
-
-.link-base-color:hover,
-.link-base-color:active,
-.link-base-color:focus {
- color: var(--blue) !important;
-}
-
-.link-base-color:hover {
- border-bottom-color: var(--lightBlue) !important;
-}
-
-.link-base-color:active,
-.link-base-color:focus {
- border-bottom-color: var(--lightBlue) !important;
+ border-bottom-color: var(--primary);
}
.link-no-underline {
- border-bottom: none !important;
-}
-
-.link-underline {
- border-bottom: 1px solid var(--lightBlue) !important;
-}
-
-.link-with-icon {
- border-bottom: none;
-}
-
-.link-with-icon > span:last-child {
- border-bottom: 1px solid var(--lightBlue);
-}
-
-.link-checkbox {
- color: inherit;
- border-bottom: none;
-}
-
-.link-checkbox.disabled,
-.link-checkbox.disabled:hover,
-.link-checkbox.disabled label {
- color: var(--secondFontColor);
- cursor: not-allowed;
-}
-
-.link-checkbox:hover,
-.link-checkbox:active,
-.link-checkbox:focus {
- color: inherit;
-}
-
-.link-checkbox-control {
- display: inline-block;
- padding: 4px 0 5px;
- line-height: 16px;
-}
-
-a.active-link,
-.link-active {
- border-bottom: none;
- cursor: default;
-}
-
-a.text-muted {
- border-bottom: 1px solid #dddddd;
- color: var(--secondFontColor);
-}
-
-a.text-muted:hover,
-a.text-muted:active,
-a.text-muted:focus {
- color: #5e5e5e;
-}
-
-a.text-muted:focus {
- outline: 1px dotted var(--blue);
+ border-bottom-color: transparent !important;
}
-a.set-homepage-link:focus,
-a.favorite-link:focus {
- outline: 1px dotted var(--blue);
+.link-no-underline:hover {
+ border-bottom-color: var(--primary) !important;
}
codeAdded: '#dff0d8',
codeRemoved: '#f2dede',
- //promotion
+ // promotion
darkBackground: '#292929',
darkBackgroundSeparator: '#413b3b',
- darkBackgroundFontColor: '#f6f8fa'
+ darkBackgroundFontColor: '#f6f8fa',
+
+ // new color palette
+ // some of these colors duplicate what we have above, but this will make it
+ // easier to align with the UX designers on what colors to use where.
+ primary: '#236a97',
+ primary40: 'rgba(35, 107, 151, 0.4)',
+
+ info500: '#0271B9',
+
+ neutral600: '#666666',
+ neutral800: '#333333',
+
+ black38: 'rgba(0, 0, 0, 0.38)'
},
sizes: {
.code-breadcrumbs > li {
padding: 5px 5px 3px;
+ display: flex;
}
.code-breadcrumbs > li:first-child {
.code-breadcrumbs > li::after {
position: relative;
- top: -1px;
+ top: 1px;
padding-left: 10px;
color: var(--secondFontColor);
font-size: 11px;
: undefined;
return (
<Link
- className="link-with-icon"
+ className="display-inline-flex-center link-no-underline"
to={getComponentOverviewUrl(
component.refKey || component.key,
component.qualifier,
- {
- branch
- },
+ { branch },
codeType
)}>
- <QualifierIcon qualifier={component.qualifier} /> <span>{name}</span>
+ <QualifierIcon
+ className="little-spacer-right"
+ qualifier={component.qualifier}
+ fill={colors.primary}
+ />
+ <span>{name}</span>
</Link>
);
} else if (canBrowse) {
Object.assign(query, { selected: component.key });
}
return (
- <Link className="link-with-icon" to={{ pathname: '/code', search: queryToSearch(query) }}>
- <QualifierIcon qualifier={component.qualifier} /> <span>{name}</span>
+ <Link
+ className="display-inline-flex-center link-no-underline"
+ to={{ pathname: '/code', search: queryToSearch(query) }}>
+ <QualifierIcon
+ className="little-spacer-right"
+ qualifier={component.qualifier}
+ fill={colors.primary}
+ />
+ <span>{name}</span>
</Link>
);
}
return (
<span>
- <QualifierIcon qualifier={component.qualifier} /> {name}
+ <QualifierIcon
+ qualifier={component.qualifier}
+ fill={
+ component.qualifier === ComponentQualifier.Directory ? colors.orange : colors.neutral800
+ }
+ />{' '}
+ {name}
</span>
);
}
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="APP"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="SVW"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="TRK"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="TRK"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="VW"
/>
>
<span>
<QualifierIcon
+ fill="#ed7d20"
qualifier="DIR"
/>
>
<span>
<QualifierIcon
+ fill="#ed7d20"
qualifier="DIR"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="FIL"
/>
foo:src/index.tsx"
>
<Link
- className="link-with-icon"
+ className="display-inline-flex-center link-no-underline"
to={
Object {
"pathname": "/code",
}
>
<QualifierIcon
+ className="little-spacer-right"
+ fill="#236a97"
qualifier="FIL"
/>
-
<span>
index.tsx
</span>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="FIL"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="FIL"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="FIL"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="FIL"
/>
>
<span>
<QualifierIcon
+ fill="#333333"
qualifier="FIL"
/>
foo"
>
<Link
- className="link-with-icon"
+ className="display-inline-flex-center link-no-underline"
to={
Object {
"pathname": "/dashboard",
}
>
<QualifierIcon
+ className="little-spacer-right"
+ fill="#236a97"
qualifier="TRK"
/>
-
<span>
Foo
</span>
foo"
>
<Link
- className="link-with-icon"
+ className="display-inline-flex-center link-no-underline"
to={
Object {
"pathname": "/dashboard",
}
>
<QualifierIcon
+ className="little-spacer-right"
+ fill="#236a97"
qualifier="TRK"
/>
-
<span>
Foo
</span>
foo"
>
<Link
- className="link-with-icon"
+ className="display-inline-flex-center link-no-underline"
to={
Object {
"pathname": "/dashboard",
}
>
<QualifierIcon
+ className="little-spacer-right"
+ fill="#236a97"
qualifier="TRK"
/>
-
<span>
Foo
</span>
{(activation.inherit === 'OVERRIDES' || activation.inherit === 'INHERITED') && (
<>
<RuleInheritanceIcon className="text-middle" inheritance={activation.inherit} />
- <Link className="link-base-color little-spacer-left text-middle" to={profilePath}>
+ <Link className="little-spacer-left text-middle" to={profilePath}>
{profile.parentName}
</Link>
</>
values={{
link: url ? (
<a
- className="link-with-icon"
+ className="link-no-underline"
href={getAzurePatUrl(url)}
rel="noopener noreferrer"
target="_blank">
className={classNames(
'display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden',
{
- disabled: disableRepositories,
- 'text-muted': disableRepositories,
- 'link-no-underline': disableRepositories
+ disabled: disableRepositories
}
)}
key={repo.id}
values={
Object {
"link": <a
- className="link-with-icon"
+ className="link-no-underline"
href="http://www.example.com/_usersSettings/tokens"
rel="noopener noreferrer"
target="_blank"
values={
Object {
"link": <a
- className="link-with-icon"
+ className="link-no-underline"
href="http://www.example.com/_usersSettings/tokens"
rel="noopener noreferrer"
target="_blank"
values={
Object {
"link": <a
- className="link-with-icon"
+ className="link-no-underline"
href="http://www.example.com/_usersSettings/tokens"
rel="noopener noreferrer"
target="_blank"
>
<Radio
checked={false}
- className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden disabled text-muted link-no-underline"
+ className="display-flex-start spacer-right spacer-bottom create-project-import-bbs-repo overflow-hidden disabled"
key="1"
onCheck={[Function]}
value="1"
<div className="spacer-right">
{linkToProject ? (
<a
- className="link-with-icon"
+ className="link-no-underline"
href={getPathUrlAsString(getBranchLikeUrl(project, branchLike))}>
{projectNameLabel}
</a>
className="spacer-right"
>
<a
- className="link-with-icon"
+ className="link-no-underline"
href="/dashboard?id=my-project"
>
<QualifierIcon
className="spacer-right"
>
<a
- className="link-with-icon"
+ className="link-no-underline"
href="/dashboard?id=my-project"
>
<QualifierIcon
return (
<header className="page-header" id="project-permissions-header">
<div className="note spacer-bottom">
- <Link className="text-muted" to={PERMISSION_TEMPLATES_PATH}>
- {translate('permission_templates.page')}
- </Link>
+ <Link to={PERMISSION_TEMPLATES_PATH}>{translate('permission_templates.page')}</Link>
</div>
<h1 className="page-title">{template.name}</h1>
<td className="nowrap hide-overflow project-row-text-cell">
<Link
- className="link-with-icon"
+ className="link-no-underline"
to={getComponentOverviewUrl(project.key, project.qualifier)}>
<QualifierIcon className="little-spacer-right" qualifier={project.qualifier} />
className="nowrap hide-overflow project-row-text-cell"
>
<Link
- className="link-with-icon"
+ className="link-no-underline"
to={
Object {
"pathname": "/dashboard",
className="nowrap hide-overflow project-row-text-cell"
>
<Link
- className="link-with-icon"
+ className="link-no-underline"
to={
Object {
"pathname": "/portfolio",
className="nowrap hide-overflow project-row-text-cell"
>
<Link
- className="link-with-icon"
+ className="link-no-underline"
to={
Object {
"pathname": "/dashboard",
return (
<div className="quality-profile-not-found">
<div className="note spacer-bottom">
- <NavLink end={true} className="text-muted" to={PROFILE_PATH}>
+ <NavLink end={true} to={PROFILE_PATH}>
{translate('quality_profiles.page')}
</NavLink>
</div>
const { profile } = this.props;
return (
- <header className="page-header quality-profile-header">
+ <div className="page-header quality-profile-header">
<div className="note spacer-bottom">
- <NavLink end={true} className="text-muted" to={PROFILE_PATH}>
+ <NavLink end={true} to={PROFILE_PATH}>
{translate('quality_profiles.page')}
</NavLink>
{' / '}
- <Link className="text-muted" to={getProfilesForLanguagePath(profile.language)}>
- {profile.languageName}
- </Link>
+ <Link to={getProfilesForLanguagePath(profile.language)}>{profile.languageName}</Link>
</div>
<h1 className="page-title">
- <ProfileLink className="link-base-color" language={profile.language} name={profile.name}>
+ <ProfileLink language={profile.language} name={profile.name}>
<span>{profile.name}</span>
</ProfileLink>
{profile.isDefault && (
{translate('quality_profiles.built_in.description')}
</div>
)}
- </header>
+ </div>
);
}
}
<ul>
{projects.map(project => (
<li className="spacer-top js-profile-project" data-key={project.key} key={project.key}>
- <Link className="link-with-icon" to={getProjectUrl(project.key)}>
+ <Link to={getProjectUrl(project.key)}>
<QualifierIcon qualifier="TRK" /> <span>{project.name}</span>
</Link>
</li>
<td className="thin nowrap text-right">
{inactiveCount != null &&
(inactiveCount > 0 ? (
- <Link className="small text-muted" to={inactiveRulesUrl}>
+ <Link className="small" to={inactiveRulesUrl}>
{formatMeasure(inactiveCount, 'SHORT_INT', null)}
</Link>
) : (
- <span className="note text-muted">0</span>
+ <span className="note">0</span>
))}
</td>
</tr>
<td className="thin nowrap text-right">
{inactiveCount != null &&
(inactiveCount > 0 ? (
- <Link className="small text-muted" to={inactiveRulesUrl}>
+ <Link className="small" to={inactiveRulesUrl}>
<strong>{formatMeasure(inactiveCount, 'SHORT_INT', null)}</strong>
</Link>
) : (
- <span className="note text-muted">0</span>
+ <span className="note">0</span>
))}
</td>
</tr>
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`should render correctly 1`] = `
-<header
+<div
className="page-header quality-profile-header"
>
<div
className="note spacer-bottom"
>
<NavLink
- className="text-muted"
end={true}
to="/profiles"
>
</NavLink>
/
<Link
- className="text-muted"
to={
Object {
"pathname": "/profiles",
className="page-title"
>
<ProfileLink
- className="link-base-color"
language="js"
name="name"
>
</li>
</ul>
</div>
-</header>
+</div>
`;
exports[`should render correctly: for default profile 1`] = `
-<header
+<div
className="page-header quality-profile-header"
>
<div
className="note spacer-bottom"
>
<NavLink
- className="text-muted"
end={true}
to="/profiles"
>
</NavLink>
/
<Link
- className="text-muted"
to={
Object {
"pathname": "/profiles",
className="page-title"
>
<ProfileLink
- className="link-base-color"
language="js"
name="name"
>
</li>
</ul>
</div>
-</header>
+</div>
`;
key="org.sonarsource.xml:xml"
>
<Link
- className="link-with-icon"
to={
Object {
"pathname": "/dashboard",
key="org.sonarsource.xml:xml"
>
<Link
- className="link-with-icon"
to={
Object {
"pathname": "/dashboard",
key="org.sonarsource.xml:xml"
>
<Link
- className="link-with-icon"
to={
Object {
"pathname": "/dashboard",
className="thin nowrap text-right"
>
<Link
- className="small text-muted"
+ className="small"
to={
Object {
"pathname": "/coding_rules",
className="thin nowrap text-right"
>
<span
- className="note text-muted"
+ className="note"
>
0
</span>
className="thin nowrap text-right"
>
<Link
- className="small text-muted"
+ className="small"
to={
Object {
"pathname": "/coding_rules",
className="thin nowrap text-right"
>
<span
- className="note text-muted"
+ className="note"
>
0
</span>
<ul>
{sortedProfiles.map(profile => (
<li className="spacer-top" key={profile.key}>
- <div className="text-ellipsis">
- <ProfileLink
- className="link-no-underline"
- language={profile.language}
- name={profile.name}>
+ <div className="text-ellipsis little-spacer-bottom">
+ <ProfileLink language={profile.language} name={profile.name}>
{profile.name}
</ProfileLink>
</div>
{profile.languageName}
{', '}
<Link
- className="text-muted"
+ className="link-no-underline"
to={getDeprecatedActiveRulesUrl({ qprofile: profile.key })}>
{translateWithParameters(
'quality_profile.x_rules',
key="qp-5"
>
<div
- className="text-ellipsis"
+ className="text-ellipsis little-spacer-bottom"
>
<ProfileLink
- className="link-no-underline"
language="js"
name="Quality Profile 5"
>
JavaScript
,
<Link
- className="text-muted"
+ className="link-no-underline"
to={
Object {
"pathname": "/coding_rules",
key="qp-4"
>
<div
- className="text-ellipsis"
+ className="text-ellipsis little-spacer-bottom"
>
<ProfileLink
- className="link-no-underline"
language="js"
name="Quality Profile 4"
>
JavaScript
,
<Link
- className="text-muted"
+ className="link-no-underline"
to={
Object {
"pathname": "/coding_rules",
key="qp-2"
>
<div
- className="text-ellipsis"
+ className="text-ellipsis little-spacer-bottom"
>
<ProfileLink
- className="link-no-underline"
language="js"
name="Quality Profile 2"
>
JavaScript
,
<Link
- className="text-muted"
+ className="link-no-underline"
to={
Object {
"pathname": "/coding_rules",
key="qp-3"
>
<div
- className="text-ellipsis"
+ className="text-ellipsis little-spacer-bottom"
>
<ProfileLink
- className="link-no-underline"
language="js"
name="Quality Profile 3"
>
JavaScript
,
<Link
- className="text-muted"
+ className="link-no-underline"
to={
Object {
"pathname": "/coding_rules",
* Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA.
*/
import * as React from 'react';
-import { SubmitButton } from '../../../components/controls/buttons';
+import { ButtonLink, SubmitButton } from '../../../components/controls/buttons';
import DeferredSpinner from '../../../components/ui/DeferredSpinner';
import { translate } from '../../../helpers/l10n';
import { getBaseUrl } from '../../../helpers/system';
.then(this.stopLoading, this.stopLoading);
};
- handleMoreOptionsClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
- event.preventDefault();
+ handleMoreOptionsClick = () => {
this.setState({ collapsed: false });
};
if (this.state.collapsed) {
return (
<div className="text-center">
- <a
- className="small text-muted js-more-options"
- href="#"
+ <ButtonLink
+ aria-expanded={false}
+ className="small js-more-options"
onClick={this.handleMoreOptionsClick}>
{translate('login.more_options')}
- </a>
+ </ButtonLink>
</div>
);
}
<div
className="text-center"
>
- <a
- className="small text-muted js-more-options"
- href="#"
+ <ButtonLink
+ aria-expanded={false}
+ className="small js-more-options"
onClick={[Function]}
>
login.more_options
- </a>
+ </ButtonLink>
</div>
`;
<div className="component-name">
<div className="component-name-parent">
<a
- className="link-with-icon"
+ className="link-no-underline"
href={getPathUrlAsString(getBranchLikeUrl(project, this.props.branchLike))}>
- <QualifierIcon qualifier="TRK" /> <span>{projectName}</span>
+ <QualifierIcon qualifier={ComponentQualifier.Project} /> <span>{projectName}</span>
</a>
</div>
className="component-name-parent"
>
<a
- className="link-with-icon"
+ className="link-no-underline"
href="/dashboard?id=project"
>
<QualifierIcon
className="component-name-parent"
>
<a
- className="link-with-icon"
+ className="link-no-underline"
href="/dashboard?id=my-project"
>
<QualifierIcon
className="component-name-parent"
>
<a
- className="link-with-icon"
+ className="link-no-underline"
href="/dashboard?id=project"
>
<QualifierIcon
{dismissable && currentUser.isLoggedIn && (
<div className="spacer-top display-flex-inline">
<ButtonLink
- className="link-base-color"
disabled={Boolean(dismissedWarning)}
onClick={() => {
this.handleDismissMessage(key);
</Link>
) : (
<Link
- className="display-inline-flex-center link-with-icon"
+ className="display-inline-flex-center"
to={href}
rel="noopener noreferrer"
target="_blank">
import { dismissAnalysisWarning, getTask } from '../../../api/ce';
import { mockTaskWarning } from '../../../helpers/mocks/tasks';
import { mockCurrentUser } from '../../../helpers/testMocks';
-import { mockEvent, waitAndUpdate } from '../../../helpers/testUtils';
+import { waitAndUpdate } from '../../../helpers/testUtils';
+import { ButtonLink } from '../../controls/buttons';
import { AnalysisWarningsModal } from '../AnalysisWarningsModal';
jest.mock('../../../api/ce', () => ({
warnings: [mockTaskWarning({ key: 'bar', dismissable: true })]
});
- const click = wrapper.find('ButtonLink.link-base-color').props().onClick;
+ const { onClick } = wrapper
+ .find(ButtonLink)
+ .at(0)
+ .props();
- expect(click).toBeDefined();
-
- click!(mockEvent());
+ if (onClick) {
+ onClick();
+ }
await waitAndUpdate(wrapper);
className="spacer-top display-flex-inline"
>
<ButtonLink
- className="link-base-color"
disabled={false}
onClick={[Function]}
>
className="little-spacer-bottom"
>
<Link
- className="display-inline-flex-center link-with-icon"
+ className="display-inline-flex-center"
rel="noopener noreferrer"
target="_blank"
to="http://link.tosome.place"
className="little-spacer-bottom"
>
<Link
- className="display-inline-flex-center link-with-icon"
+ className="display-inline-flex-center"
rel="noopener noreferrer"
target="_blank"
to="/documentation/guide"
import * as React from 'react';
import { translate, translateWithParameters } from '../../helpers/l10n';
import { formatMeasure } from '../../helpers/measures';
+import { ButtonLink } from '../controls/buttons';
interface Props {
count: number;
}
export default class ListStyleFacetFooter extends React.PureComponent<Props> {
- handleShowMoreClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleShowMoreClick = () => {
this.props.showMore();
};
- handleShowLessClick = (event: React.MouseEvent<HTMLAnchorElement>) => {
- event.preventDefault();
- event.currentTarget.blur();
+ handleShowLessClick = () => {
if (this.props.showLess) {
this.props.showLess();
}
{translateWithParameters('x_show', formatMeasure(count, 'INT', null))}
{hasMore && (
- <a className="spacer-left text-muted" href="#" onClick={this.handleShowMoreClick}>
+ <ButtonLink className="spacer-left" onClick={this.handleShowMoreClick}>
{translate('show_more')}
- </a>
+ </ButtonLink>
)}
{this.props.showLess && allShown && (
- <a className="spacer-left text-muted" href="#" onClick={this.handleShowLessClick}>
+ <ButtonLink className="spacer-left" onClick={this.handleShowLessClick}>
{translate('show_less')}
- </a>
+ </ButtonLink>
)}
</footer>
);
import { shallow } from 'enzyme';
import * as React from 'react';
import { click } from '../../../helpers/testUtils';
+import { ButtonLink } from '../../controls/buttons';
import ListStyleFacetFooter from '../ListStyleFacetFooter';
it('should not render "show more"', () => {
<ListStyleFacetFooter count={3} showLess={undefined} showMore={showMore} total={15} />
);
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('a'));
+ click(wrapper.find(ButtonLink));
expect(showMore).toBeCalled();
});
<ListStyleFacetFooter count={15} showLess={showLess} showMore={jest.fn()} total={15} />
);
expect(wrapper).toMatchSnapshot();
- click(wrapper.find('a'));
+ click(wrapper.find(ButtonLink));
expect(showLess).toBeCalled();
});
className="note spacer-top spacer-bottom text-center"
>
x_show.15
- <a
- className="spacer-left text-muted"
- href="#"
+ <ButtonLink
+ className="spacer-left"
onClick={[Function]}
>
show_less
- </a>
+ </ButtonLink>
</footer>
`;
className="note spacer-top spacer-bottom text-center"
>
x_show.3
- <a
- className="spacer-left text-muted"
- href="#"
+ <ButtonLink
+ className="spacer-left"
onClick={[Function]}
>
show_more
- </a>
+ </ButtonLink>
</footer>
`;
<Icon {...iconProps}>
<path
d="M12.5 6.5c0-1.1-.9-2-2-2s-2 .9-2 2c0 .8.5 1.5 1.2 1.8-.3.6-.7 1.1-1.2 1.4-.9.5-1.9.5-2.5.4V4c.9-.2 1.5-1 1.5-1.9 0-1.1-.9-2-2-2s-2 .9-2 2C3.5 3 4.1 3.8 5 4v8c-.9.2-1.5 1-1.5 1.9 0 1.1.9 2 2 2s2-.9 2-2c0-.9-.6-1.7-1.5-1.9v-1c.2 0 .5.1.7.1.7 0 1.5-.1 2.2-.6.8-.5 1.4-1.2 1.7-2.1 1.1 0 1.9-.9 1.9-1.9zm-8-4.4c0-.6.4-1 1-1s1 .4 1 1-.4 1-1 1-1-.5-1-1zm2 11.9c0 .6-.4 1-1 1s-1-.4-1-1 .4-1 1-1 1 .4 1 1zm4-6.5c-.6 0-1-.4-1-1s.4-1 1-1 1 .4 1 1-.4 1-1 1z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);
<Icon {...iconProps}>
<path
d="M13,11.9L13,5.5C13,5.4 13.232,1.996 7.9,2L9.1,0.8L8.5,0.1L5.9,2.6L8.5,5.1L9.2,4.4L7.905,3.008C12.256,2.99 12,5.4 12,5.5L12,11.9C11.1,12.1 10.5,12.9 10.5,13.8C10.5,14.9 11.4,15.8 12.5,15.8C13.6,15.8 14.5,14.9 14.5,13.8C14.5,12.9 13.9,12.2 13,11.9ZM4,11.9C4.9,12.2 5.5,12.9 5.5,13.8C5.5,14.9 4.6,15.8 3.5,15.8C2.4,15.8 1.5,14.9 1.5,13.8C1.5,12.9 2.1,12.1 3,11.9L3,4.1C2.1,3.9 1.5,3.1 1.5,2.2C1.5,1.1 2.4,0.2 3.5,0.2C4.6,0.2 5.5,1.1 5.5,2.2C5.5,3.1 4.9,3.9 4,4.1L4,11.9ZM12.5,14.9C11.9,14.9 11.5,14.5 11.5,13.9C11.5,13.3 11.9,12.9 12.5,12.9C13.1,12.9 13.5,13.3 13.5,13.9C13.5,14.5 13.1,14.9 12.5,14.9ZM3.5,14.9C2.9,14.9 2.5,14.5 2.5,13.9C2.5,13.3 2.9,12.9 3.5,12.9C4.1,12.9 4.5,13.3 4.5,13.9C4.5,14.5 4.1,14.9 3.5,14.9ZM2.5,2.2C2.5,1.6 2.9,1.2 3.5,1.2C4.1,1.2 4.5,1.6 4.5,2.2C4.5,2.8 4.1,3.2 3.5,3.2C2.9,3.2 2.5,2.8 2.5,2.2Z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);
}
const FoundIcon = qualifierIcons[qualifier.toLowerCase()];
- const ariaLabel = qualifier != null ? translate(`qualifier.${qualifier}`) : undefined;
+ const ariaLabel = qualifier ? translate(`qualifier.${qualifier}`) : undefined;
return FoundIcon ? (
<FoundIcon className={className} fill={fill} ariaLabel={ariaLabel} {...props} />
) : null;
<Icon {...iconProps} ariaLabel={ariaLabel}>
<path
d="M3.014 10.986a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zm-5.004-.021c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zm-4.98 1.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM2.984 6a2 2 0 1 1-.001 4.001A2 2 0 0 1 2.984 6zm9.984 0a2 2 0 1 1-.001 4.001A2 2 0 0 1 12.968 6zm-5.004-.021c1.103 0 2 .897 2 2a2 2 0 1 1-2-2zM2.984 7a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm-5.004-.021a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2zM3 1.025a2 2 0 1 1-.001 4.001A2 2 0 0 1 3 1.025zm9.984 0a2 2 0 1 1-.001 4.001 2 2 0 0 1 .001-4.001zM7.98 1.004c1.103 0 2 .896 2 2s-.897 2-2 2a2 2 0 0 1 0-4zM3 2.025a1 1 0 1 1 0 2 1 1 0 0 1 0-2zm9.984 0a1 1 0 1 1 0 2 1 1 0 0 1 0-2zM7.98 2.004a1.001 1.001 0 0 1 0 2 1 1 0 0 1 0-2z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);
<Icon {...iconProps} ariaLabel={ariaLabel}>
<path
d="M7.974 8.02a3.5 3.5 0 0 1-2.482-1.017 3.428 3.428 0 0 1-1.028-2.455c0-.927.365-1.8 1.028-2.455a3.505 3.505 0 0 1 2.482-1.017 3.5 3.5 0 0 1 2.482 1.017 3.434 3.434 0 0 1 1.027 2.455c0 .928-.365 1.8-1.027 2.455A3.504 3.504 0 0 1 7.974 8.02zm0-5.778c-1.286 0-2.332 1.034-2.332 2.306s1.046 2.307 2.332 2.307c1.285 0 2.332-1.035 2.332-2.307S9.258 2.242 7.974 2.242zm3.534 6.418c.127.016.243.045.348.086.17.066.302.146.406.246.132.124.253.282.36.47.126.218.226.442.3.668.08.253.15.535.206.838.056.313.095.604.113.867.02.28.03.57.03.862 0 .532-.174.758-.306.882-.142.132-.397.31-.973.31H3.948c-.233 0-.437-.03-.606-.09-.14-.05-.26-.123-.366-.222-.13-.123-.306-.35-.306-.88 0-.294.01-.584.03-.863.018-.263.056-.554.112-.867a6.5 6.5 0 0 1 .207-.838c.073-.226.173-.45.298-.667.108-.19.23-.347.36-.47.106-.1.238-.18.407-.247.105-.04.22-.07.348-.086.202.13.432.277.683.435.342.217.756.4 1.265.564.523.166 1.06.25 1.59.25a5.25 5.25 0 0 0 1.592-.25c.51-.164.923-.348 1.266-.565.25-.158.48-.304.682-.435l-.002.002zm-.244-1.18c-.055 0-.184.066-.387.196-.202.13-.43.276-.685.437-.255.16-.586.307-.994.437-.408.13-.818.196-1.23.196-.41 0-.82-.065-1.228-.196a4.303 4.303 0 0 1-.993-.437c-.255-.16-.484-.306-.686-.437-.202-.13-.33-.196-.386-.196-.374 0-.716.06-1.026.183-.31.12-.572.283-.787.487a3.28 3.28 0 0 0-.57.737 4.662 4.662 0 0 0-.395.888c-.098.303-.18.633-.244.988a9.652 9.652 0 0 0-.128.992c-.02.306-.032.62-.032.942 0 .73.224 1.304.672 1.726.448.42 1.043.632 1.785.632h8.044c.743 0 1.34-.21 1.787-.633.447-.42.67-.996.67-1.725 0-.32-.01-.635-.03-.942a9.159 9.159 0 0 0-.374-1.98c-.098-.304-.23-.6-.395-.888a3.23 3.23 0 0 0-.57-.737 2.404 2.404 0 0 0-.788-.487 2.779 2.779 0 0 0-1.026-.183h-.004z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);
<Icon {...iconProps} ariaLabel={ariaLabel}>
<path
d="M14 15H2V1l7.997.02c1 .034 1.759.758 2.428 1.42.667.663 1.561 1.605 1.574 2.555H14V15zM9 2H3v12h10V6H9V2zm3 10H4v-1h8v1zm0-2H4V9h8v1zm-1.988-5h3.008c-.012-.674-.714-1.443-1.204-1.937-.488-.495-1.039-1.058-1.816-1.055v2.96l.012.032z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);
<Icon {...iconProps} ariaLabel={ariaLabel}>
<path
d="M14.97 14.97H1.016V1.015H14.97V14.97zm-1-12.955H2.015V13.97H13.97V2.015zm-.973 10.982H9V9h3.997v3.997zM7 12.996H3.004V9H7v3.996zM11.997 10H10v1.997h1.997V10zM6 10H4.004v1.996H6V10zm1-3H3.006V3.006H7V7zm5.985 0H9V3.015h3.985V7zM6 4.006H4.006V6H6V4.006zm5.985.009H10V6h1.985V4.015z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);
<Icon {...iconProps} ariaLabel={ariaLabel}>
<path
d="M14.985 13.988L1 14.005 1.02 5h13.966v8.988h-.001zM1.998 5.995l.006 7.02L14.022 13 14 6.004l-12.002-.01v.001zM3 4.5V4h9.996l.004.5h1l-.005-1.497-11.98.003L2 4.5h1zm1-2v-.504h8.002L12 2.5h1l-.004-1.495H3.003L3 2.5h1z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);
<Icon {...iconProps} ariaLabel={ariaLabel}>
<path
d="M14 7h2v9H7v-2H0V0h14v7zM8 8v7h7V8H8zm3 6H9v-2h2v2zm3 0h-2v-2h2v2zm-1-7V1H1v12h6V7h6zm-7 5H2V8h4v4zm5-1H9V9h2v2zm3 0h-2V9h2v2zM5 9H3v2h2V9zm1-3H2V2h4v4zm6 0H8V2h4v4zM5 3H3v2h2V3zm6 0H9v2h2V3z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);
<Icon {...iconProps} ariaLabel={ariaLabel}>
<path
d="M14 15H2V1l7.997.02c1.013-.03 1.57.893 2.239 1.555.667.663 1.75 1.47 1.763 2.42H14V15zM9 2H3v12h10V6H9V2zM7 8l-3 2.5L7 13V8zm1 5l3-2.5L8 8v5zm2.012-8h3.008c-.012-.674-.78-1.258-1.27-1.752-.488-.495-.973-1.243-1.75-1.24v2.96l.012.032z"
- style={{ fill: fill || colors.blue }}
+ style={{ fill: fill || colors.primary }}
/>
</Icon>
);