Skip to content
Branch: master
Find file History
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
..
Failed to load latest commit information.
README.md
consts.js UPDATE: Breakpoints - too large gap Feb 26, 2019
index.js ADD: Breakpoints queries, Hide component Jan 10, 2019
index.js.flow FIX: Flow type for mediaQueries Feb 12, 2019

README.md

Media queries

In the orbit-components package you can find several media queries that are based on the mobile first approach.

Media query functions

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

Example below is a good start to implement media query functions into your project that uses 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%;
  `)};
`

You can use these media queries in your project:

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

Breakpoints for testing purposes

For testing your components with Enzyme, you can also use static breakpoints.

Imagine that we have component and we want to test if it's contain specific styles:

const StyledComponent = styled.div`
  width: 100%;
  
  ${media.desktop(css`
    width: 50%;
  `)};

In this case, our test would require to mount this component and than check if it's have specific styles with toHaveStyleRule function from package jest-styled-components:

import * as React from "react";
import { mount } from "enzyme";

import { breakpoints } from "@kiwicom/orbit-components/lib/utils/mediaQuery"

import StyledComponent from "./"

describe("StyledComponent", () => {
  const component = mount(<StyledComponent />);
  
  it("should have width 100 % by default", () => {
    expect(component).toHaveStyleRule("width", "100%");
  });
  
  it("should have width 50 % on desktop viewport", () => {
    expect(component).toHaveStyleRule("width", "50%", {
      media: breakpoints.desktop,
    });
  });
});
You can’t perform that action at this time.