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 7 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
81 changes: 56 additions & 25 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,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">
Copy link

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 •
edited
Loading

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 •
edited
Loading

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
246 changes: 170 additions & 76 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
<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