Unverified Commit 2babc998 authored by Andrey Azov's avatar Andrey Azov Committed by GitHub
Browse files

Add ButtonLink component (#742)

parent 7a2073c7
Pipeline #273040 failed with stages
in 2 minutes and 15 seconds
@import 'src/styles/common';
.buttonLink {
display: inline-block;
padding: var(--button-link-padding, 7px 18px);
border-radius: var(--button-link-border-radius, 4px);
border: var(--button-link-border, 1px solid #{$blue});
background-color: var(--button-link-background-color, #{$blue});
color: var(--button-link-color, #{$white});
font-weight: var(--button-link-font-weight, #{$bold});
user-select: none;
}
.buttonLinkActive {
border: var(--button-link-active-border, 1px solid #{$black});
background-color: var(--button-link-active-background-color, #{$black});
pointer-events: none;
cursor: default;
}
.buttonLinkDisabled {
border: var(--button-link-disabled-border, 1px solid #{$grey});
background-color: var(--button-link-disabled-background-color, #{$grey});
pointer-events: none;
cursor: default;
}
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* 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
* http://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.
*/
import React from 'react';
import { NavLink, NavLinkProps } from 'react-router-dom';
import classNames from 'classnames';
import styles from './ButtonLink.scss';
/**
* This is a link that looks like a button.
* Using React-Router's Link component
*/
type Props = NavLinkProps & {
isDisabled?: boolean;
};
const ButtonLink = (props: Props) => {
const { className, isDisabled, children, ...otherProps } = props;
const inactiveLinkClasses = classNames(
styles.buttonLink,
{ [styles.buttonLinkDisabled]: isDisabled },
className
);
const activeLinkClasses = classNames(
styles.buttonLink,
styles.buttonLinkActive,
className
);
return isDisabled ? (
<span className={inactiveLinkClasses}>{children}</span>
) : (
<NavLink
{...otherProps}
className={({ isActive }) =>
isActive ? activeLinkClasses : inactiveLinkClasses
}
>
{children}
</NavLink>
);
};
export default ButtonLink;
.wrapper {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 1em;
}
/**
* See the NOTICE file distributed with this work for additional information
* regarding copyright ownership.
*
* 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
* http://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.
*/
import React from 'react';
import { MemoryRouter } from 'react-router';
import ButtonLink from 'src/shared/components/button-link/ButtonLink';
import styles from './ButtonLink.stories.scss';
export default {
title: 'Components/Shared Components/ButtonLink'
};
export const ButtonLinkStory = () => (
<MemoryRouter initialEntries={['/foo']}>
<div className={styles.wrapper}>
<ButtonLink to="/foo">I am a link</ButtonLink>
<ButtonLink to="/">I am a link</ButtonLink>
<ButtonLink to="/bar" isDisabled={true}>
I am disabled
</ButtonLink>
</div>
</MemoryRouter>
);
ButtonLinkStory.storyName = 'default';
Markdown is supported
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment