feat(open-authoring): add hover tooltip (#5567)

This commit is contained in:
Brady Stroud [SSW]
2021-07-06 23:43:51 +10:00
committed by GitHub
parent 4183409e71
commit 1822815118
6 changed files with 2318 additions and 68 deletions

View File

@ -41,6 +41,40 @@ const styles = {
`,
};
const TooltipText = styled.div`
visibility: hidden;
width: 321px;
background-color: #555;
color: #fff;
text-align: unset;
border-radius: 6px;
padding: 5px;
/* Position the tooltip text */
position: absolute;
z-index: 1;
top: 145%;
left: 50%;
margin-left: -320px;
/* Fade in tooltip */
opacity: 0;
transition: opacity 0.3s;
`;
const Tooltip = styled.div`
position: relative;
display: inline-block;
&:hover + ${TooltipText} {
visibility: visible;
opacity: 0.9;
}
`;
const TooltipContainer = styled.div`
position: relative;
`;
const DropdownButton = styled(StyledDropdownButton)`
${styles.noOverflow}
@media (max-width: 1200px) {
@ -301,40 +335,64 @@ export class EditorToolbar extends React.Component {
);
};
renderStatusInfoTooltip = () => {
const { t, currentStatus } = this.props;
const statusToLocaleKey = {
[status.get('DRAFT')]: 'statusInfoTooltipDraft',
[status.get('PENDING_REVIEW')]: 'statusInfoTooltipInReview',
};
const statusKey = Object.keys(statusToLocaleKey).find(key => key === currentStatus);
return (
<TooltipContainer>
<Tooltip>
<Icon type="info-circle" size="small" className="tooltip" />
</Tooltip>
{statusKey && (
<TooltipText>{t(`editor.editorToolbar.${statusToLocaleKey[statusKey]}`)}</TooltipText>
)}
</TooltipContainer>
);
};
renderWorkflowStatusControls = () => {
const { isUpdatingStatus, onChangeStatus, currentStatus, t, useOpenAuthoring } = this.props;
return (
<ToolbarDropdown
dropdownTopOverlap="40px"
dropdownWidth="120px"
renderButton={() => (
<StatusButton>
{isUpdatingStatus
? t('editor.editorToolbar.updating')
: t('editor.editorToolbar.setStatus')}
</StatusButton>
)}
>
<StatusDropdownItem
label={t('editor.editorToolbar.draft')}
onClick={() => onChangeStatus('DRAFT')}
icon={currentStatus === status.get('DRAFT') ? 'check' : null}
/>
<StatusDropdownItem
label={t('editor.editorToolbar.inReview')}
onClick={() => onChangeStatus('PENDING_REVIEW')}
icon={currentStatus === status.get('PENDING_REVIEW') ? 'check' : null}
/>
{useOpenAuthoring ? (
''
) : (
<>
<ToolbarDropdown
dropdownTopOverlap="40px"
dropdownWidth="120px"
renderButton={() => (
<StatusButton>
{isUpdatingStatus
? t('editor.editorToolbar.updating')
: t('editor.editorToolbar.setStatus')}
</StatusButton>
)}
>
<StatusDropdownItem
label={t('editor.editorToolbar.ready')}
onClick={() => onChangeStatus('PENDING_PUBLISH')}
icon={currentStatus === status.get('PENDING_PUBLISH') ? 'check' : null}
label={t('editor.editorToolbar.draft')}
onClick={() => onChangeStatus('DRAFT')}
icon={currentStatus === status.get('DRAFT') ? 'check' : null}
/>
)}
</ToolbarDropdown>
<StatusDropdownItem
label={t('editor.editorToolbar.inReview')}
onClick={() => onChangeStatus('PENDING_REVIEW')}
icon={currentStatus === status.get('PENDING_REVIEW') ? 'check' : null}
/>
{useOpenAuthoring ? (
''
) : (
<StatusDropdownItem
label={t('editor.editorToolbar.ready')}
onClick={() => onChangeStatus('PENDING_PUBLISH')}
icon={currentStatus === status.get('PENDING_PUBLISH') ? 'check' : null}
/>
)}
</ToolbarDropdown>
{useOpenAuthoring && this.renderStatusInfoTooltip()}
</>
);
};

View File

@ -4,21 +4,6 @@ import { fromJS } from 'immutable';
import { EditorToolbar } from '../EditorToolbar';
jest.mock('netlify-cms-ui-default', () => ({
// eslint-disable-next-line react/display-name
Icon: props => <mock-icon {...props} />,
// eslint-disable-next-line react/display-name
Dropdown: props => <mock-dropdown {...props} />,
// eslint-disable-next-line react/display-name
DropdownItem: props => <mock-dropdown-item {...props} />,
// eslint-disable-next-line react/display-name
StyledDropdownButton: props => <mock-dropdown-button {...props} />,
colorsRaw: {},
colors: {},
components: {},
buttons: {},
zIndex: {},
}));
jest.mock('../../UI', () => ({
// eslint-disable-next-line react/display-name
SettingsDropdown: props => <mock-settings-dropdown {...props} />,
@ -112,5 +97,19 @@ describe('EditorToolbar', () => {
);
expect(asFragment()).toMatchSnapshot();
});
['draft', 'pending_review', 'pending_publish'].forEach(status => {
it(`should render with status=${status},useOpenAuthoring=${useOpenAuthoring}`, () => {
const { asFragment } = render(
<EditorToolbar
{...props}
hasWorkflow={true}
currentStatus={status}
useOpenAuthoring={useOpenAuthoring}
/>,
);
expect(asFragment()).toMatchSnapshot();
});
});
});
});