Media queries

Create responsive designs using our media queries.

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:

NameApplies from width
mediumMobile414px
largeMobile576px
tablet768px
desktop992px
largeDesktop1200px

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 { render } from "@testing-library/react";
import theme from "@kiwicom/orbit-components/lib/defaultTheme";
import { getBreakpointWidth } from "@kiwicom/orbit-components/lib/utils/mediaQuery";
import StyledComponent from "./";
describe("StyledComponent", () => {
it("should have 100% width by default", () => {
render(<StyledComponent data-test="test" />);
expect(screen.getByTestId("test")).toHaveStyleRule("width", "100%");
});
it("should have a width of 50% on a desktop viewport", () => {
render(<StyledComponent data-test="test" />);
expect(screen.getByTestId("test")).toHaveStyleRule("width", "50%", {
media: getBreakpointWidth("desktop", theme),
});
});
});