60) {
- @return #000; // Lighter backgorund, return dark color
+ @return #000; // Lighter background, return dark color
} @else {
@return #fff; // Darker background, return light color
}
@@ -25,8 +23,6 @@ $tc-drawer-tabs-background: tint($brand-primary, 90) !default;
right: 0;
bottom: 0;
width: 50vw;
- // should always stay lower than dialog z-index which is set to 1040
- z-index: 100;
}
@media (min-width: $screen-md-min) and (max-width: $screen-md-max) {
@@ -55,6 +51,13 @@ $tc-drawer-tabs-background: tint($brand-primary, 90) !default;
width: 100%;
}
+.tc-drawer-main {
+ display: flex;
+ flex-direction: column;
+ flex-grow: 1;
+ overflow: hidden;
+}
+
@media screen and (min-width: $screen-xs-max) {
.drawer-stacked {
.tc-drawer-header-title,
@@ -130,15 +133,17 @@ $tc-drawer-tabs-background: tint($brand-primary, 90) !default;
}
}
-:global(.tc-with-drawer-wrapper) :global(.tc-drawer.stacked)::after {
- background: rgba(0, 0, 0, 0.4);
- content: ' ';
- height: 100%;
- width: 100%;
- position: absolute;
- top: 0;
-}
+:global(.tc-with-drawer-wrapper) {
+ :global(.tc-drawer.stacked)::after {
+ background: rgba(0, 0, 0, 0.4);
+ content: ' ';
+ height: 100%;
+ width: 100%;
+ position: absolute;
+ top: 0;
+ }
-:global(.tc-with-drawer-wrapper:last-child) :global(.tc-drawer.stacked)::after {
- content: none;
+ &:last-child :global(.tc-drawer.stacked)::after {
+ content: none;
+ }
}
diff --git a/packages/components/src/Drawer/Drawer.test.js b/packages/components/src/Drawer/Drawer.test.js
index e2b2c956c24..6d4af3877a2 100644
--- a/packages/components/src/Drawer/Drawer.test.js
+++ b/packages/components/src/Drawer/Drawer.test.js
@@ -1,72 +1,56 @@
import React from 'react';
-import renderer from 'react-test-renderer';
-import { mount } from 'enzyme';
+import { shallow, mount } from 'enzyme';
import Drawer, { cancelActionComponent } from './Drawer.component';
+const drawerProps = {
+ title: 'My drawer',
+};
+
describe('Drawer', () => {
it('should render', () => {
- const wrapper = renderer
- .create(
-
- Hello world
- ,
- )
- .toJSON();
- expect(wrapper).toMatchSnapshot();
- });
- it('should render without tc-drawer-transition class', () => {
- const wrapper = renderer
- .create(
-
- Hello world
- ,
- )
- .toJSON();
- expect(wrapper).toMatchSnapshot();
+ const wrapper = shallow(
+
+ Hello world
+ ,
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
});
+
it('should render using custom styles', () => {
- const wrapper = renderer
- .create(
-
- Hello world
- ,
- )
- .toJSON();
- expect(wrapper).toMatchSnapshot();
+ const wrapper = shallow(
+
+ Hello world
+ ,
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
});
+
it('should render using custom className', () => {
- const wrapper = renderer
- .create(
-
- Hello world
- ,
- )
- .toJSON();
- expect(wrapper).toMatchSnapshot();
+ const wrapper = shallow(
+
+ Hello world
+ ,
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
});
+
it('should render stacked', () => {
- const wrapper = renderer
- .create(
-
- Hello world
- ,
- )
- .toJSON();
- expect(wrapper).toMatchSnapshot();
+ const wrapper = shallow(
+
+ Hello world
+ ,
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
});
+
it('should not render if no children', () => {
- const wrapper = renderer.create(
).toJSON();
- expect(wrapper).toMatchSnapshot();
- });
- it('should render cancelActionComponent', () => {
- const wrapper = mount(cancelActionComponent({}));
- expect(wrapper.find('button')).toBeTruthy();
- });
- it('should not render cancelActionComponent', () => {
- expect(cancelActionComponent()).toBe(null);
+ const wrapper = shallow(
);
+ expect(wrapper.getElement()).toMatchSnapshot();
});
+
it('should render with tabs', () => {
+ // given
const tabs = {
items: [
{
@@ -81,35 +65,97 @@ describe('Drawer', () => {
onSelect: jest.fn(),
selectedKey: '2',
};
- const wrapper = renderer
- .create(
-
- Hello world
- ,
- )
- .toJSON();
- expect(wrapper).toMatchSnapshot();
+
+ // when
+ const wrapper = shallow(
+
+ Hello world
+ ,
+ );
+
+ // then
+ expect(wrapper.getElement()).toMatchSnapshot();
+ });
+
+ describe('#cancelActionComponent', () => {
+ it('should render cancelAction', () => {
+ const wrapper = mount(cancelActionComponent({}));
+ expect(wrapper.find('button')).toBeTruthy();
+ });
+
+ it('should not render anything', () => {
+ expect(cancelActionComponent()).toBe(null);
+ });
+ });
+});
+
+describe('Drawer.Content', () => {
+ it('should render', () => {
+ const wrapper = shallow(
+
+ Hello world
+ ,
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
+ });
+
+ it('should render content with extra className', () => {
+ const wrapper = shallow(
+
+ Hello world
+ ,
+ );
+ expect(wrapper.getElement()).toMatchSnapshot();
});
+});
+
+describe('Drawer.Animation', () => {
+ it('should wrap drawer in a CSSTransition', () => {
+ // given
+ const DrawerContent = () =>
My drawer content
;
+
+ // when
+ const wrapper = shallow(
{() => );
- it('render drawer content without extra className', () => {
- const wrapper = renderer
- .create(
-
- Hello world
- ,
- )
- .toJSON();
- expect(wrapper).toMatchSnapshot();
+ // then
+ expect(wrapper.getElement()).toMatchSnapshot();
});
- it('render drawer content with extra className', () => {
- const wrapper = renderer
- .create(
-
- Hello world
- ,
- )
- .toJSON();
- expect(wrapper).toMatchSnapshot();
+ it('should pass animation props to the drawer component', () => {
+ // given
+ const DrawerContent = animationProps =>
My drawer content
;
+
+ // when
+ const wrapper = shallow(
+
+ {animationProps => ,
+ );
+
+ // then
+ const animationProps = wrapper.find(DrawerContent).props();
+ expect(animationProps.active).toBe(true);
+ expect(animationProps.transitioned).toBe(false);
+ expect(animationProps.close).toBeDefined();
+ });
+
+ it('should call onClose() function after close transition', () => {
+ // given
+ const DrawerContent = animationProps =>
My drawer content
;
+ const onClose = jest.fn();
+
+ const wrapper = mount(
+
+ {animationProps => ,
+ );
+
+ // when
+ const close = wrapper.find(DrawerContent).props().close;
+ expect(onClose).not.toBeCalled();
+ close();
+
+ // then
+ expect(onClose).toBeCalled();
});
});
diff --git a/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap b/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap
index c92a234596e..31ce431f8a6 100644
--- a/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap
+++ b/packages/components/src/Drawer/__snapshots__/Drawer.test.js.snap
@@ -1,293 +1,222 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`Drawer render drawer content with extra className 1`] = `
-
-
- Hello world
-
-
-`;
-
-exports[`Drawer render drawer content without extra className 1`] = `
-
-
- Hello world
-
-
-`;
-
exports[`Drawer should not render if no children 1`] = `null`;
exports[`Drawer should render 1`] = `
-
+
+
+
+ Hello world
+
+
-
-
- Hello world
-
-
-
-
+
-
+
`;
exports[`Drawer should render stacked 1`] = `
-
+
+
+
+ Hello world
+
+
-
-
- Hello world
-
-
-
-
+
-
+
`;
exports[`Drawer should render using custom className 1`] = `
-
+
+
+
+ Hello world
+
+
-
-
- Hello world
-
-
-
-
+
-
+
`;
exports[`Drawer should render using custom styles 1`] = `
-
+
+
+
+ Hello world
+
+
-
-
- Hello world
-
-
-
-
+
-
+
`;
exports[`Drawer should render with tabs 1`] = `
-
+
-
-
-
-
-
-
- Tab 1
-
-
-
-
-
-
- Tab 2
-
-
-
-
-
-
-
+
+
+
+
+ Hello world
+
+
+
-
-
- Hello world
-
-
-
-
+
+
+`;
+
+exports[`Drawer.Animation should wrap drawer in a CSSTransition 1`] = `
+
+
+`;
+
+exports[`Drawer.Content should render 1`] = `
+
+
+ Hello world
+
`;
-exports[`Drawer should render without tc-drawer-transition class 1`] = `
+exports[`Drawer.Content should render content with extra className 1`] = `
-
-
-
-
- Hello world
-
-
-
-
-
-
+
+ Hello world
+
`;
diff --git a/packages/components/src/Layout/__snapshots__/Layout.test.js.snap b/packages/components/src/Layout/__snapshots__/Layout.test.js.snap
index 12ec696453a..8ceacf32730 100644
--- a/packages/components/src/Layout/__snapshots__/Layout.test.js.snap
+++ b/packages/components/src/Layout/__snapshots__/Layout.test.js.snap
@@ -140,68 +140,32 @@ exports[`Layout should render layout with Drawer component 1`] = `
className="theme-tc-with-drawer-container"
>
-
-
-
- Hello drawers
-
-
- You should not being able to read this because I'm first
-
-
+
+ Hello drawers
+
+
+ You should not being able to read this because I'm first
+
-
-
-
- Hello drawers
-
-
- The content dictate the width
-
-
+
+ Hello drawers
+
+
+ The content dictate the width
+
diff --git a/packages/components/src/WithDrawer/WithDrawer.component.js b/packages/components/src/WithDrawer/WithDrawer.component.js
index 3368ffab8ac..3204c96780c 100644
--- a/packages/components/src/WithDrawer/WithDrawer.component.js
+++ b/packages/components/src/WithDrawer/WithDrawer.component.js
@@ -1,9 +1,5 @@
import PropTypes from 'prop-types';
import React from 'react';
-import { CSSTransitionGroup } from 'react-css-transition';
-import get from 'lodash/get';
-
-import Drawer from '../Drawer';
import theme from './withDrawer.scss';
@@ -27,21 +23,7 @@ function WithDrawer({ drawers, children }) {
return (
);
}
diff --git a/packages/components/src/WithDrawer/__snapshots__/withDrawer.test.js.snap b/packages/components/src/WithDrawer/__snapshots__/withDrawer.test.js.snap
new file mode 100644
index 00000000000..43d77fff6af
--- /dev/null
+++ b/packages/components/src/WithDrawer/__snapshots__/withDrawer.test.js.snap
@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`WithDrawer should wrap drawers in a container 1`] = `
+
+`;
diff --git a/packages/components/src/WithDrawer/withDrawer.test.js b/packages/components/src/WithDrawer/withDrawer.test.js
index cc1ce4f9d8c..60a58171166 100644
--- a/packages/components/src/WithDrawer/withDrawer.test.js
+++ b/packages/components/src/WithDrawer/withDrawer.test.js
@@ -5,15 +5,18 @@ import WithDrawer from './WithDrawer.component';
import Drawer from './../Drawer';
describe('WithDrawer', () => {
- it('should inject route as key if available', () => {
- const drawer =
);
- expect(wrapper.children().children().key()).toEqual('path');
- });
+ it('should wrap drawers in a container', () => {
+ // given
+ const drawers = [
,
+ );
- it('should inject generated key if route isn\'t available', () => {
- const drawer =
);
- expect(wrapper.children().children().key()).toEqual('0');
+ // then
+ expect(wrapper.getElement()).toMatchSnapshot();
});
});
diff --git a/packages/containers/package.json b/packages/containers/package.json
index b1c55538b1f..c74b0a66d9e 100644
--- a/packages/containers/package.json
+++ b/packages/containers/package.json
@@ -87,9 +87,9 @@
"react-dom": "^15.6.2",
"react-i18next": "^5.2.0",
"react-redux": "5.0.5",
- "react-router": "3.2.0",
- "react-router-redux": "4.0.8",
- "react-storybook-cmf": "^0.2.0",
+ "react-router": "4.2.0",
+ "react-router-redux": "5.0.0-alpha.9",
+ "react-storybook-cmf": "^0.3.1",
"react-stub-context": "^0.7.0",
"react-test-renderer": "^15.6.2",
"react-virtualized": "9.10.1",
diff --git a/packages/containers/src/HomeListView/HomeListView.component.js b/packages/containers/src/HomeListView/HomeListView.component.js
index 522f806590a..8e9da3d1026 100644
--- a/packages/containers/src/HomeListView/HomeListView.component.js
+++ b/packages/containers/src/HomeListView/HomeListView.component.js
@@ -12,24 +12,10 @@ function getContent(Component, props) {
return
;
}
-function wrapChildren(children) {
- if (children && children.props && children.props.children) {
- return [children, ...wrapChildren(children.props.children)];
- } else if (children && !children.props) {
- // this happens ony in tests with enzyme's mount
- return [];
- }
- return [children];
-}
-
function HomeListView({ getComponent, id, hasTheme, sidepanel, list, header, children }) {
if (!sidepanel || !list) {
return null;
}
- let drawers = children || [];
- if (!Array.isArray(drawers)) {
- drawers = wrapChildren(drawers);
- }
const Renderers = Inject.getAll(getComponent, { HeaderBar, SidePanel, List });
return (
@@ -39,7 +25,7 @@ function HomeListView({ getComponent, id, hasTheme, sidepanel, list, header, chi
mode="TwoColumns"
header={getContent(Renderers.HeaderBar, header)}
one={getContent(Renderers.SidePanel, sidepanel)}
- drawers={drawers}
+ drawers={children}
>
{getContent(Renderers.List, list)}
diff --git a/packages/containers/src/HomeListView/__snapshots__/HomeListView.test.js.snap b/packages/containers/src/HomeListView/__snapshots__/HomeListView.test.js.snap
index 64251ec951a..b46866fa51e 100644
--- a/packages/containers/src/HomeListView/__snapshots__/HomeListView.test.js.snap
+++ b/packages/containers/src/HomeListView/__snapshots__/HomeListView.test.js.snap
@@ -3,11 +3,9 @@
exports[`Component HomeListView should be able to render theme 1`] = `