Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

adding tooltip to ribbons in condensed card view #1481

Merged
merged 11 commits into from
May 5, 2021
81 changes: 56 additions & 25 deletions src/Components/ResultsCondensedCardTop/ResultsCondensedCardTop.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import PropTypes from 'prop-types';
import { get } from 'lodash';
import { Link } from 'react-router-dom';
import StaticDevContent from 'Components/StaticDevContent';
import { Tooltip } from 'react-tippy';
import { Handshake, CriticalNeed, HardToFill, ServiceNeedDifferential } from '../Ribbon';
import { POSITION_DETAILS, HOME_PAGE_CARD_TYPE } from '../../Constants/PropTypes';
import { NO_POST } from '../../Constants/SystemMessages';
Expand Down Expand Up @@ -37,6 +38,55 @@ const ResultsCondensedCardTop = ({

const link = `/${isProjectedVacancy ? 'vacancy' : 'details'}/${position.id}${isTandem ? '?tandem=true' : ''}`;

const ribbons = (
<div className="usa-grid-full post-ribbon-container">
SidelineCory24 marked this conversation as resolved.
Show resolved Hide resolved
<div className="ribbon-container-condensed">
{
hasHandshake &&
<Tooltip
title="Handshake"
offset={-30}
SidelineCory24 marked this conversation as resolved.
Show resolved Hide resolved
>
<Handshake showText={false} className="ribbon-condensed-card" />
</Tooltip>
}
{
<Tooltip
title="Critical need"
offset={-30}
>
<StaticDevContent>
<CriticalNeed showText={false} className="ribbon-condensed-card" />
</StaticDevContent>
</Tooltip>
}
{
isDifficultToStaff &&
<Tooltip
title="Hard to fill"
offset={-30}
>
<StaticDevContent>
<HardToFill showText={false} className="ribbon-condensed-card" />
</StaticDevContent>
</Tooltip>
}
{
isServiceNeedDifferential &&
<Tooltip
title="Serive need differential"
SidelineCory24 marked this conversation as resolved.
Show resolved Hide resolved
offset={-30}
>
<StaticDevContent>
<ServiceNeedDifferential showText={false} className="ribbon-condensed-card" />
</StaticDevContent>
</Tooltip>
}
</div>

</div>
);

const innerContent = (
<div>
{
Expand All @@ -63,28 +113,6 @@ const ResultsCondensedCardTop = ({
}
</span></span>
</div>
<div className="ribbon-container-condensed">
{
hasHandshake && <Handshake showText={false} className="ribbon-condensed-card" />
}
{
<StaticDevContent>
<CriticalNeed showText={false} className="ribbon-condensed-card" />
</StaticDevContent>
}
{
isDifficultToStaff &&
<StaticDevContent>
<HardToFill showText={false} className="ribbon-condensed-card" />
</StaticDevContent>
}
{
isServiceNeedDifferential &&
<StaticDevContent>
<ServiceNeedDifferential showText={false} className="ribbon-condensed-card" />
</StaticDevContent>
}
</div>
</div>
</div>
);
Expand All @@ -94,9 +122,12 @@ const ResultsCondensedCardTop = ({
};

return (
<Link to={link} {...containerProps} title="View details for this position">
{innerContent}
</Link>
<div {...containerProps}>
{ribbons}
<Link to={link} title="View details for this position">

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

im not sure, but maybe keep {...containerProps} with the Link will fix the tooltip/link thing

Copy link

@elizabeth-jimenez elizabeth-jimenez May 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nope, but i'll look into it more ok, do the above comment but also move the class condensed-card-top from line 121 and put it on line 125

Copy link

@elizabeth-jimenez elizabeth-jimenez May 5, 2021

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

<div className="condensed-card-top">
    {ribbons}
    <Link to={link} {...containerProps} title="View details for this position">
        {innerContent}
    </Link>
</div>

{innerContent}
</Link>
</div>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -1,46 +1,53 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`ResultsCondensedCardTopComponent matches snapshot 1`] = `
<Link
<div
className="usa-grid-full condensed-card-top condensed-card-top--clickable"
replace={false}
title="View details for this position"
to="/details/1"
>
<div>
<div
className="usa-grid-full post-ribbon-container"
>
<div
className="usa-grid-full condensed-card-top-header-container"
className="ribbon-container-condensed"
>
<div
className="usa-width-one-whole condensed-card-top-header condensed-card-top-header-left"
>
<h3>
OMS (DCM)
</h3>
</div>
</div>
<div
className="usa-grid-full post-ribbon-container"
>
<div
className="post-container"
>
<span>
<span
className="title"
>
Location:
</span>

<span
className="data"
>
Freetown, Sierra Leone
</span>
</span>
</div>
<div
className="ribbon-container-condensed"
<Tooltip
animateFill={true}
animation="shift"
arrow={false}
arrowSize="regular"
className=""
delay={0}
disabled={false}
distance={10}
duration={375}
followCursor={false}
hideDelay={0}
hideDuration={375}
hideOnClick={true}
html={null}
inertia={false}
interactive={false}
interactiveBorder={2}
multiple={false}
offset={-30}
onHidden={[Function]}
onHide={[Function]}
onRequestClose={[Function]}
onShow={[Function]}
onShown={[Function]}
popperOptions={Object {}}
position="top"
size="regular"
sticky={false}
stickyDuration={200}
style={Object {}}
tag="div"
theme="dark"
title="Critical need"
touchHold={false}
trigger="mouseenter focus"
unmountHTMLWhenHide={false}
zIndex={9999}
>
<Connect(StaticDevContent)>
<CriticalNeed
Expand All @@ -49,53 +56,100 @@ exports[`ResultsCondensedCardTopComponent matches snapshot 1`] = `
showText={false}
/>
</Connect(StaticDevContent)>
</div>
</Tooltip>
</div>
</div>
</Link>
`;

exports[`ResultsCondensedCardTopComponent matches snapshot when type is serviceNeed 1`] = `
<Link
className="usa-grid-full condensed-card-top condensed-card-top--clickable"
replace={false}
title="View details for this position"
to="/details/1"
>
<div>
<div
className="usa-grid-full condensed-card-top-header-container"
>
<Link
replace={false}
title="View details for this position"
to="/details/1"
>
<div>
<div
className="usa-width-one-whole condensed-card-top-header condensed-card-top-header-left"
className="usa-grid-full condensed-card-top-header-container"
>
<h3>
OMS (DCM)
</h3>
<div
className="usa-width-one-whole condensed-card-top-header condensed-card-top-header-left"
>
<h3>
OMS (DCM)
</h3>
</div>
</div>
</div>
<div
className="usa-grid-full post-ribbon-container"
>
<div
className="post-container"
className="usa-grid-full post-ribbon-container"
>
<span>
<span
className="title"
>
Location:
</span>

<span
className="data"
>
Freetown, Sierra Leone
<div
className="post-container"
>
<span>
<span
className="title"
>
Location:
</span>

<span
className="data"
>
Freetown, Sierra Leone
</span>
</span>
</span>
</div>
</div>
<div
className="ribbon-container-condensed"
</div>
</Link>
</div>
`;

exports[`ResultsCondensedCardTopComponent matches snapshot when type is serviceNeed 1`] = `
<div
className="usa-grid-full condensed-card-top condensed-card-top--clickable"
>
<div
className="usa-grid-full post-ribbon-container"
>
<div
className="ribbon-container-condensed"
>
<Tooltip
animateFill={true}
animation="shift"
arrow={false}
arrowSize="regular"
className=""
delay={0}
disabled={false}
distance={10}
duration={375}
followCursor={false}
hideDelay={0}
hideDuration={375}
hideOnClick={true}
html={null}
inertia={false}
interactive={false}
interactiveBorder={2}
multiple={false}
offset={-30}
onHidden={[Function]}
onHide={[Function]}
onRequestClose={[Function]}
onShow={[Function]}
onShown={[Function]}
popperOptions={Object {}}
position="top"
size="regular"
sticky={false}
stickyDuration={200}
style={Object {}}
tag="div"
theme="dark"
title="Critical need"
touchHold={false}
trigger="mouseenter focus"
unmountHTMLWhenHide={false}
zIndex={9999}
>
<Connect(StaticDevContent)>
<CriticalNeed
Expand All @@ -104,8 +158,48 @@ exports[`ResultsCondensedCardTopComponent matches snapshot when type is serviceN
showText={false}
/>
</Connect(StaticDevContent)>
</div>
</Tooltip>
</div>
</div>
</Link>
<Link
replace={false}
title="View details for this position"
to="/details/1"
>
<div>
<div
className="usa-grid-full condensed-card-top-header-container"
>
<div
className="usa-width-one-whole condensed-card-top-header condensed-card-top-header-left"
>
<h3>
OMS (DCM)
</h3>
</div>
</div>
<div
className="usa-grid-full post-ribbon-container"
>
<div
className="post-container"
>
<span>
<span
className="title"
>
Location:
</span>

<span
className="data"
>
Freetown, Sierra Leone
</span>
</span>
</div>
</div>
</div>
</Link>
</div>
`;
Loading