diff --git a/packages/component-wizard/src/components/AuthorList.js b/packages/component-wizard/src/components/AuthorList.js index 5b180b4c47a66fd579ee0e54a006d9efff5d71bb..d95d353918c340163ef77dc93afb96ac64cca823 100644 --- a/packages/component-wizard/src/components/AuthorList.js +++ b/packages/component-wizard/src/components/AuthorList.js @@ -83,10 +83,22 @@ const Author = ({ affiliation, isDragging, dragHandle, + isOver, + ...rest }) => ( - <div className={classnames(classes.author)}> - {dragHandle} - <div className={classnames(classes.container)}> + <div + className={classnames({ + [classes.author]: true, + [classes.dashed]: isOver, + })} + > + {!isOver && dragHandle} + <div + className={classnames({ + [classes.container]: true, + [classes.hide]: isOver, + })} + > <span className={classnames(classes.title)}>Author</span> <div className={classnames(classes.row)}> <Label label="First name" value={firstName} /> diff --git a/packages/component-wizard/src/components/AuthorList.local.scss b/packages/component-wizard/src/components/AuthorList.local.scss index 353731088f448cb5a66c83d9f2019b3f8da0c879..72d0be63161150460cfb8f6573bc1dfd423a4cd4 100644 --- a/packages/component-wizard/src/components/AuthorList.local.scss +++ b/packages/component-wizard/src/components/AuthorList.local.scss @@ -3,6 +3,14 @@ flex-direction: row; } +.hide { + opacity: 0; +} + +.dashed { + border: 1px dashed #444 !important; +} + .author { border: 1px solid #444; display: flex;