From ed3161a17c50c25054e83e8b978914f17c8356ca Mon Sep 17 00:00:00 2001
From: Simon Adcock <simonadcock2@gmail.com>
Date: Tue, 16 Feb 2021 08:57:21 +0000
Subject: [PATCH] supporting hiding above and below breakpoints

---
 .../components/layout/components/hide/hide.tsx     |  1 +
 .../components/layout/stories/hide/default.tsx     | 14 ++++++++++++++
 2 files changed, 15 insertions(+)

diff --git a/src/core/components/layout/components/hide/hide.tsx b/src/core/components/layout/components/hide/hide.tsx
index aa7a530c9..9069967d2 100644
--- a/src/core/components/layout/components/hide/hide.tsx
+++ b/src/core/components/layout/components/hide/hide.tsx
@@ -21,6 +21,7 @@ const Hide = ({ children, above, below }: HideProps) => {
 	}
 	if (above) {
 		whenToHide = css`
+			${whenToHide}
 			${from[above]} {
 				display: none;
 			}
diff --git a/src/core/components/layout/stories/hide/default.tsx b/src/core/components/layout/stories/hide/default.tsx
index 9c90fffb2..b4e129162 100644
--- a/src/core/components/layout/stories/hide/default.tsx
+++ b/src/core/components/layout/stories/hide/default.tsx
@@ -33,3 +33,17 @@ export const above = () => (
 above.story = {
 	name: 'above',
 };
+
+export const between = () => (
+	<Container>
+		<Hide below="tablet" above="leftCol">
+			<div css={contents}>
+				Will only appear between desktop and leftCol
+			</div>
+		</Hide>
+	</Container>
+);
+
+between.story = {
+	name: 'between',
+};