Commit 5f7f925e authored by Lyza Danger Gardner's avatar Lyza Danger Gardner Committed by Lyza Gardner

Migrate `NotebookModal` styles to TW, remove external SASS

parent 366bc92f
...@@ -27,7 +27,7 @@ function NotebookIframe({ config, groupId }) { ...@@ -27,7 +27,7 @@ function NotebookIframe({ config, groupId }) {
return ( return (
<iframe <iframe
title={'Hypothesis annotation notebook'} title={'Hypothesis annotation notebook'}
className="NotebookIframe" className="h-full w-full border-0"
// Enable media in annotations to be shown fullscreen // Enable media in annotations to be shown fullscreen
allowFullScreen allowFullScreen
src={notebookAppSrc} src={notebookAppSrc}
...@@ -104,10 +104,14 @@ export default function NotebookModal({ eventBus, config }) { ...@@ -104,10 +104,14 @@ export default function NotebookModal({ eventBus, config }) {
return ( return (
<div <div
className={classnames('NotebookModal__outer', { 'is-hidden': isHidden })} className={classnames(
'fixed z-max top-0 left-0 right-0 bottom-0 p-3 bg-black/50',
{ hidden: isHidden }
)}
data-testid="notebook-outer"
> >
<div className="NotebookModal__inner"> <div className="relative w-full h-full" data-testid="notebook-inner">
<div className="NotebookModal__close-button-container"> <div className="absolute right-0 text-xl m-3">
<IconButton <IconButton
icon="cancel" icon="cancel"
title="Close the Notebook" title="Close the Notebook"
......
...@@ -12,6 +12,8 @@ describe('NotebookModal', () => { ...@@ -12,6 +12,8 @@ describe('NotebookModal', () => {
let eventBus; let eventBus;
let emitter; let emitter;
const outerSelector = '[data-testid="notebook-outer"]';
const createComponent = config => { const createComponent = config => {
const component = mount( const component = mount(
<NotebookModal <NotebookModal
...@@ -46,14 +48,14 @@ describe('NotebookModal', () => { ...@@ -46,14 +48,14 @@ describe('NotebookModal', () => {
it('hides modal on first render', () => { it('hides modal on first render', () => {
const wrapper = createComponent(); const wrapper = createComponent();
const outer = wrapper.find('.NotebookModal__outer'); const outer = wrapper.find(outerSelector);
assert.isFalse(outer.exists()); assert.isFalse(outer.exists());
}); });
it('shows modal on "openNotebook" event', () => { it('shows modal on "openNotebook" event', () => {
const wrapper = createComponent(); const wrapper = createComponent();
let outer = wrapper.find('.NotebookModal__outer'); let outer = wrapper.find(outerSelector);
assert.isFalse(outer.exists()); assert.isFalse(outer.exists());
assert.isFalse(wrapper.find('iframe').exists()); assert.isFalse(wrapper.find('iframe').exists());
...@@ -61,8 +63,8 @@ describe('NotebookModal', () => { ...@@ -61,8 +63,8 @@ describe('NotebookModal', () => {
emitter.publish('openNotebook', 'myGroup'); emitter.publish('openNotebook', 'myGroup');
wrapper.update(); wrapper.update();
outer = wrapper.find('.NotebookModal__outer'); outer = wrapper.find(outerSelector);
assert.isFalse(outer.hasClass('is-hidden')); assert.isFalse(outer.hasClass('hidden'));
const iframe = wrapper.find('iframe'); const iframe = wrapper.find('iframe');
assert.equal( assert.equal(
...@@ -118,17 +120,17 @@ describe('NotebookModal', () => { ...@@ -118,17 +120,17 @@ describe('NotebookModal', () => {
emitter.publish('openNotebook', 'myGroup'); emitter.publish('openNotebook', 'myGroup');
wrapper.update(); wrapper.update();
let outer = wrapper.find('.NotebookModal__outer'); let outer = wrapper.find(outerSelector);
assert.isFalse(outer.hasClass('is-hidden')); assert.isFalse(outer.hasClass('hidden'));
act(() => { act(() => {
wrapper.find('IconButton').prop('onClick')(); wrapper.find('IconButton').prop('onClick')();
}); });
wrapper.update(); wrapper.update();
outer = wrapper.find('.NotebookModal__outer'); outer = wrapper.find(outerSelector);
assert.isTrue(outer.hasClass('is-hidden')); assert.isTrue(outer.hasClass('hidden'));
}); });
it('resets document scrollability on closing the modal', () => { it('resets document scrollability on closing the modal', () => {
......
@use '../variables' as var;
@use '../mixins/molecules';
@use '../mixins/buttons';
.NotebookModal {
&__outer {
box-sizing: border-box;
position: fixed;
// This large zIndex is used to bring the notebook to the front, so it is not
// hidden by other elements from the host page. It is the same value used by
// the sidebar
z-index: 2147483647;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: var.$layout-space;
// TBD: Actual opacity/overlay we'd like to use
background-color: rgba(0, 0, 0, 0.5);
&.is-hidden {
display: none;
}
}
&__inner {
position: relative;
box-sizing: border-box;
@include molecules.card-frame;
padding: 0;
width: 100%;
height: 100%;
border: 0;
}
&__close-button-container {
position: absolute;
right: 0;
font-size: var.$font-size--heading;
margin: var.$layout-space--medium;
}
&__close-button-container > button {
cursor: pointer;
}
}
.NotebookIframe {
width: 100%;
height: 100%;
border: none;
}
...@@ -7,5 +7,4 @@ ...@@ -7,5 +7,4 @@
// Annotator-specific components. // Annotator-specific components.
@use './AdderToolbar'; @use './AdderToolbar';
@use './Buckets'; @use './Buckets';
@use './NotebookModal';
@use './WarningBanner'; @use './WarningBanner';
...@@ -86,6 +86,7 @@ export default { ...@@ -86,6 +86,7 @@ export default {
zIndex: { zIndex: {
1: '1', 1: '1',
2: '2', 2: '2',
max: '2147483647',
}, },
}, },
}, },
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment