Your bookmarks

Media queries

Mobile-first breakpoints for our layouts.

The orbit-components package contains several media queries that are based on a mobile-first approach.

Media query functions

By default, you should first define styles for mobile and then use queries for bigger devices.

The example below is a good start to implementing media query functions in a project using styled-components:

import media from "@kiwicom/orbit-components/lib/utils/mediaQuery";
import styled, { css } from "styled-components";

const StyledComponent = styled.div`
  width: 100%;

  ${media.desktop(css`
    width: 50%;
  `)};
`;

To use the component, combine it with your theme:

import media from "@kiwicom/orbit-components/lib/utils/mediaQuery";
import styled, { css } from "styled-components";
import ThemeProvider from "@kiwicom/orbit-components/lib/ThemeProvider";
import defaultTheme from "@kiwicom/orbit-components/lib/defaultTheme";

const StyledComponent = styled.div`
  width: 100%;

  ${media.desktop(css`
    width: 50%;
  `)};
`;
function App() {
  return (
    <ThemeProvider theme={defaultTheme}>
      <StyledComponent>This div will be styled.</StyledComponent>
    </ThemeProvider>
  );
}

You can use the following media queries in your project:

Name Applies from width
mediumMobile 414px
largeMobile 576px
tablet 768px
desktop 992px
largeDesktop 1200px

Breakpoints for testing purposes

To test your components with Enzyme, especially styles, you can also use the getBreakpointWidth function.

Imagine that you have a component and want to test if it contains specific styles:

const StyledComponent = styled.div`
  width: 100%;

  ${media.desktop(css`
    width: 50%;
  `)};

In this case, you would need to mount this component and than check if it has specific styles with the toHaveStyleRule function from the jest-styled-components package.

The getBreakpointWidth function accepts the viewport name and a theme object. You can use it like this:

import * as React from "react";
import { mount } from "enzyme";
import theme from "@kiwicom/orbit-components/lib/defaultTheme";
import { getBreakpointWidth } from "@kiwicom/orbit-components/lib/utils/mediaQuery";

import StyledComponent from "./";

describe("StyledComponent", () => {
  const component = mount(<StyledComponent />);

  it("should have 100% width by default", () => {
    expect(component).toHaveStyleRule("width", "100%");
  });

  it("should have a width of 50% on a desktop viewport", () => {
    expect(component).toHaveStyleRule("width", "50%", {
      media: getBreakpointWidth("desktop", theme),
    });
  });
});