Merge pull request #729 from guardian/sa-hide-above-below

Supporting hiding above and below breakpoints
guardian · Feb 16, 2021 · 0c0905c · 0c0905c
2 parents 1496525 + ed3161a
commit 0c0905c
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 0 deletions.
diff --git 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
@@ -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',
+};