import {BREAKPOINTS, responsiveQuerySizes} from '@canvas/breakpoints'

import {Responsive} from '@instructure/ui-responsive'
import {Flex} from '@instructure/ui-flex'
import {responsiveQuerySizes} from '@canvas/breakpoints'

function MyComponent() {
  return (
    <Responsive
      match="media"
      query={responsiveQuerySizes({mobile: true, desktop: true})}
      props={{
        mobile: {direction: 'column', spacing: 'small'},
        desktop: {direction: 'row', spacing: 'medium'},
      }}
      render={props => {
        if (!props) return null
        return (
          <Flex direction={props.direction} gap={props.spacing}>
            <Flex.Item>Content 1</Flex.Item>
            <Flex.Item>Content 2</Flex.Item>
          </Flex>
        )
      }}
    />
  )
}

import {BREAKPOINTS} from '@canvas/breakpoints'

// In CSS-in-JS
const styles = {
  container: {
    width: '100%',
    [`@media (min-width: ${BREAKPOINTS.desktop}px)`]: {
      width: '80%',
    },
  },
}

// In conditional logic
if (window.innerWidth <= BREAKPOINTS.mobile) {
  // Mobile layout
}

responsiveQuerySizes({mobile: true, desktop: true})
// mobile: ≤767px
// desktop: ≥768px

responsiveQuerySizes({tablet: true, desktop: true})
// tablet: ≤1023px (includes mobile)
// desktop: ≥1024px

responsiveQuerySizes({mobile: true, tablet: true, desktop: true})
// mobile: ≤767px
// tablet: 768-1023px
// desktop: ≥1024px

// Before
query={{
  mobile: {maxWidth: '767px'},
  desktop: {minWidth: '768px'},
}}

// After
import {responsiveQuerySizes} from '@canvas/breakpoints'

query={responsiveQuerySizes({mobile: true, desktop: true})}

yarn test @canvas/breakpoints