import React from 'react';
import { Media } from '../..';
export default {
  title: 'Atoms / Media',
  parameters: {
    component: Media
  }
};
export var BasicUsage = {
  render: function render() {
    return React.createElement(React.Fragment, null, React.createElement(Media, {
      query: function query(t) {
        return t.media.lessThan(t.breakpoints.md);
      }
    }, "I am only shown on screens smaller than medium size"), React.createElement(Media, {
      query: function query(t) {
        return t.media.between(t.breakpoints.md, t.breakpoints.lg);
      }
    }, "I am only shown between medium and large sizes"), React.createElement(Media, {
      query: function query(t) {
        return t.media.greaterThan(t.breakpoints.lg);
      }
    }, "I am only shown on screens bigger than large size"));
  },
  name: 'Basic usage'
};
export var WithSizeKey = {
  render: function render() {
    return React.createElement(React.Fragment, null, React.createElement(Media, {
      query: function query(t) {
        return t.media.lessThan(t.breakpoints.md.size);
      }
    }, "I am only shown on screens smaller than medium size"), React.createElement(Media, {
      query: function query(t) {
        return t.media.between(t.breakpoints.md.size, t.breakpoints.lg.size);
      }
    }, "I am only shown between medium and large sizes"), React.createElement(Media, {
      query: function query(t) {
        return t.media.greaterThan(t.breakpoints.lg.size);
      }
    }, "I am only shown on screens bigger than large size"));
  },
  name: 'With size key'
};