@atomic-layout/emotion: Adds "Visible" component

packages/atomic-layout-emotion/src/components/Visible.tsx

@@ -0,0 +1,79 @@
+import * as React from 'react'
+import styled from '@emotion/styled'
+import {
+  openBreakpoint,
+  closeBreakpoint,
+  mergeAreaRecords,
+} from '@atomic-layout/core'
+import Box from './Box'
+import { useMediaQuery } from '../index'
+import {
+  OnlyProps,
+  resolveBreakpoint,
+} from '../../../atomic-layout/src/components/Only'
+
+const VisibleContainer = styled(Box)<{ matches: boolean }>`
+  ${({ matches }) =>
+    !matches &&
+    `
+      visibility: hidden;
+    `}
+`
+
+const Visible: React.FC<OnlyProps> = ({
+  children,
+  except,
+  for: exactBreakpointName,
+  from: minBreakpointName,
+  to: maxBreakpointName,
+  ...boxProps
+}) => {
+  const exactBreakpoint = resolveBreakpoint(exactBreakpointName)
+  const minBreakpoint = resolveBreakpoint(minBreakpointName)
+  const maxBreakpoint = resolveBreakpoint(maxBreakpointName)
+
+  let mediaQuery = exactBreakpoint
+
+  // Bell, __/--\__
+  if (minBreakpoint && maxBreakpoint && !except) {
+    const { breakpoint } = mergeAreaRecords(
+      {
+        behavior: 'down',
+        breakpoint: maxBreakpoint,
+      },
+      {
+        behavior: 'up',
+        breakpoint: minBreakpoint,
+      },
+      false,
+    )
+
+    mediaQuery = breakpoint
+  }
+
+  // Notch, --\__/--
+  if (minBreakpoint && maxBreakpoint && except) {
+    mediaQuery = [closeBreakpoint(minBreakpoint), openBreakpoint(maxBreakpoint)]
+  }
+
+  // High-pass, __/--
+  if (minBreakpoint && !maxBreakpoint) {
+    mediaQuery = openBreakpoint(minBreakpoint)
+  }
+
+  // Low-pass, --\__
+  if (!minBreakpoint && maxBreakpoint) {
+    mediaQuery = closeBreakpoint(maxBreakpoint)
+  }
+
+  const matches = useMediaQuery(mediaQuery)
+  const ariaHidden = !matches ? { 'aria-hidden': 'true' } : {}
+
+  return (
+    <VisibleContainer {...boxProps} {...ariaHidden} matches={matches}>
+      {children}
+    </VisibleContainer>
+  )
+}
+
+export default Visible

packages/atomic-layout-emotion/src/index.ts

@@ -5,6 +5,7 @@ export default Layout
 export { default as Box } from './components/Box'
 export { default as Composition } from './components/Composition'
 export { default as Only } from './components/Only'
+export { default as Visible } from './components/Visible'
 
 /* Hooks */
 export {
@@ -14,4 +15,5 @@ export {
   useResponsiveProps,
   useResponsiveValue,
   useViewportChange,
+  useMediaQuery,
 } from '../../atomic-layout/src'