Moved style to the proper scope

This commit is contained in:
Alejandro Celaya 2020-01-12 12:08:26 +01:00
parent f507a3628c
commit 124441238b
4 changed files with 12 additions and 4 deletions

View file

@ -59,3 +59,7 @@ body,
.paddingless {
padding: 0;
}
.indivisible {
white-space: nowrap;
}

View file

@ -3,6 +3,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faInfoCircle as infoIcon } from '@fortawesome/free-solid-svg-icons';
import { UncontrolledTooltip } from 'reactstrap';
import { shortUrlType } from '../reducers/shortUrlsList';
import './ShortUrlVisitsCount.scss';
const propTypes = {
shortUrl: shortUrlType,
@ -18,9 +19,9 @@ const ShortUrlVisitsCount = ({ shortUrl }) => {
return (
<React.Fragment>
<span>
<span className="indivisible">
{visitsCount}
<small id="maxVisitsControl" className="short-urls-row__max-visits-control">
<small id="maxVisitsControl" className="short-urls-visits-count__max-visits-control">
{' '}/ {maxVisits}{' '}
<sup>
<FontAwesomeIcon icon={infoIcon} />

View file

@ -0,0 +1,3 @@
.short-urls-visits-count__max-visits-control {
cursor: help;
}

View file

@ -17,7 +17,7 @@ describe('<ShortUrlVisitsCount />', () => {
it('just returns visits when no maxVisits is provided', () => {
const visitsCount = 45;
const wrapper = createWrapper({ visitsCount });
const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
expect(wrapper.html()).toEqual(`<span>${visitsCount}</span>`);
@ -30,7 +30,7 @@ describe('<ShortUrlVisitsCount />', () => {
const maxVisits = 500;
const meta = { maxVisits };
const wrapper = createWrapper({ visitsCount, meta });
const maxVisitsHelper = wrapper.find('.short-urls-row__max-visits-control');
const maxVisitsHelper = wrapper.find('.short-urls-visits-count__max-visits-control');
const maxVisitsTooltip = wrapper.find(UncontrolledTooltip);
expect(wrapper.html()).toContain(`/ ${maxVisits}`);