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.

Sign up for GitHub

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

Jump to bottom

adding tooltip to ribbons in condensed card view #1481

Merged
merged 11 commits into from
May 5, 2021
Merged

adding tooltip to ribbons in condensed card view #1481

Show file tree
Hide file tree
Changes from 10 commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
d774275
adding tooltip to ribbons in condensed card view
SidelineCory24 May 3, 2021
5d64d61
Merge branch 'dev' into update/ribbon-condensed-card-tooltip
SidelineCory24 May 3, 2021
a8afbf6
updated where ribbons render & styling updates
SidelineCory24 May 4, 2021
14b0984
Merge branch 'dev' into update/ribbon-condensed-card-tooltip
SidelineCory24 May 4, 2021
00015f8
showing tooltip above ribbon
SidelineCory24 May 4, 2021
7287432
snapshot update
SidelineCory24 May 4, 2021
d2e2a8c
Merge branch 'dev' into update/ribbon-condensed-card-tooltip
SidelineCory24 May 4, 2021
1a1fb71
PR feedback updates for styling
SidelineCory24 May 5, 2021
3c43218
Merge branch 'update/ribbon-condensed-card-tooltip' of https://github…
SidelineCory24 May 5, 2021
00209fa
snapshot & styling update
SidelineCory24 May 5, 2021
ef2bb71
typo fix
SidelineCory24 May 5, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
87 changes: 61 additions & 26 deletions src/Components/ResultsCondensedCardTop/ResultsCondensedCardTop.jsx
View file
Open in desktop
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,59 @@ const ResultsCondensedCardTop = ({

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

const ribbons = (
<div className="post-ribbon-container">
<div className="ribbon-container-condensed">
{
hasHandshake &&
<Tooltip
title="Handshake"
arrow
offset={-30}
>
<Handshake showText={false} className="ribbon-condensed-card" />
</Tooltip>
}
{
<Tooltip
title="Critical need"
arrow
offset={-30}
>
<StaticDevContent>
<CriticalNeed showText={false} className="ribbon-condensed-card" />
</StaticDevContent>
</Tooltip>
}
{
isDifficultToStaff &&
<Tooltip
title="Hard to fill"
arrow
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
arrow
offset={-30}
>
<StaticDevContent>
<ServiceNeedDifferential showText={false} className="ribbon-condensed-card" />
</StaticDevContent>
</Tooltip>
}
</div>

</div>
);

const innerContent = (
<div>
{
Expand All @@ -63,40 +117,21 @@ 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>
);

const containerProps = {
className: `usa-grid-full condensed-card-top ${cardTopClass} condensed-card-top--clickable`,
className: `usa-grid-full ${cardTopClass} condensed-card-top--clickable`,
};

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

Expand Down
250 changes: 173 additions & 77 deletions src/Components/ResultsCondensedCardTop/__snapshots__/ResultsCondensedCardTop.test.jsx.snap
View file
Open in desktop
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
className="usa-grid-full condensed-card-top condensed-card-top--clickable"
replace={false}
title="View details for this position"
to="/details/1"
<div
className="condensed-card-top"
>
<div>
<div
className="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={true}
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,101 @@ 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
className="usa-grid-full condensed-card-top--clickable"
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="condensed-card-top"
>
<div
className="post-ribbon-container"
>
<div
className="ribbon-container-condensed"
>
<Tooltip
animateFill={true}
animation="shift"
arrow={true}
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 +159,49 @@ exports[`ResultsCondensedCardTopComponent matches snapshot when type is serviceN
showText={false}
/>
</Connect(StaticDevContent)>
</div>
</Tooltip>
</div>
</div>
</Link>
<Link
className="usa-grid-full 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"
>
<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