mirrors/shlink-web-client
1
0
Fork 0
mirror of https://github.com/shlinkio/shlink-web-client.git synced 2024-12-23 09:30:31 +03:00
Code Issues Projects Releases Packages Wiki Activity

Added some feedback to know which cardsin overview pages are clickable

Browse source
This commit is contained in:
Alejandro Celaya 2022-02-05 10:46:46 +01:00
parent e0d43020dc
commit 60929342fb
3 changed files with 16 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/servers/helpers/HighlightCard.scss
View file

@ -7,6 +7,13 @@
text-decoration: none; text-decoration: none;
} }
.highlight-card__link-icon {
position: absolute;
right: 5px;
bottom: 5px;
opacity: 0.1;
}
.highlight-card__title { .highlight-card__title {
text-transform: uppercase; text-transform: uppercase;
color: $textPlaceholder; color: $textPlaceholder;

7
src/servers/helpers/HighlightCard.tsx
View file

@ -1,6 +1,8 @@
import { FC } from 'react'; import { FC } from 'react';
import { Card, CardText, CardTitle } from 'reactstrap'; import { Card, CardText, CardTitle } from 'reactstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { faLink as linkIcon } from '@fortawesome/free-solid-svg-icons';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import './HighlightCard.scss'; import './HighlightCard.scss';
export interface HighlightCardProps { export interface HighlightCardProps {
@ -8,8 +10,11 @@ export interface HighlightCardProps {
link?: string; link?: string;
} }
const buildExtraProps = (link?: string) => !link ? {} : { tag: Link, to: link };
export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link }) => ( export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link }) => (
<Card className="highlight-card" body {...(link && { tag: Link, to: link })}> <Card className="highlight-card" body {...buildExtraProps(link)}>
{link && <FontAwesomeIcon size="3x" className="highlight-card__link-icon" icon={linkIcon} />}
<CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle> <CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle>
<CardText tag="h2">{children}</CardText> <CardText tag="h2">{children}</CardText>
</Card> </Card>

3
test/servers/helpers/HighlightCard.test.tsx
View file

@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
import { ReactNode } from 'react'; import { ReactNode } from 'react';
import { Card, CardText, CardTitle } from 'reactstrap'; import { Card, CardText, CardTitle } from 'reactstrap';
import { Link } from 'react-router-dom'; import { Link } from 'react-router-dom';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { HighlightCard, HighlightCardProps } from '../../../src/servers/helpers/HighlightCard'; import { HighlightCard, HighlightCardProps } from '../../../src/servers/helpers/HighlightCard';
describe('<HighlightCard />', () => { describe('<HighlightCard />', () => {
@ -20,6 +21,7 @@ describe('<HighlightCard />', () => {
expect(wrapper.find(Card)).toHaveLength(1); expect(wrapper.find(Card)).toHaveLength(1);
expect(wrapper.find(CardTitle)).toHaveLength(1); expect(wrapper.find(CardTitle)).toHaveLength(1);
expect(wrapper.find(CardText)).toHaveLength(1); expect(wrapper.find(CardText)).toHaveLength(1);
expect(wrapper.find(FontAwesomeIcon)).toHaveLength(0);
expect(wrapper.prop('tag')).not.toEqual(Link); expect(wrapper.prop('tag')).not.toEqual(Link);
expect(wrapper.prop('to')).not.toBeDefined(); expect(wrapper.prop('to')).not.toBeDefined();
}); });
@ -53,6 +55,7 @@ describe('<HighlightCard />', () => {
])('adds extra props when a link is provided', (link) => { ])('adds extra props when a link is provided', (link) => {
const wrapper = createWrapper({ title: 'foo', link }); const wrapper = createWrapper({ title: 'foo', link });
expect(wrapper.find(FontAwesomeIcon)).toHaveLength(1);
expect(wrapper.prop('tag')).toEqual(Link); expect(wrapper.prop('tag')).toEqual(Link);
expect(wrapper.prop('to')).toEqual(link); expect(wrapper.prop('to')).toEqual(link);
}); });