Sign upLogin

bbc/simorgh

View on GitHub
Star
src/app/legacy/components/Grid/__snapshots__/index.test.jsx.snap

Summary

Maintainability
Test Coverage
// Jest Snapshot v1, https://goo.gl/fbAQLP

exports[`Grid should render CPSPageGrid 1`] = `
@supports (display: grid) {
  .emotion-1 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }
}

@media (min-width: 63rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

@supports (display: grid) {
  .emotion-3 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 80rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }
}

<div>
  <div
    class="emotion-0 emotion-1 emotion-2"
    dir="ltr"
  >
    <div
      class="emotion-3 emotion-2"
      dir="ltr"
    >
      <p>
        CPS page grid
      </p>
    </div>
  </div>
</div>
`;

exports[`Grid should render CPSPageGrid with additional props 1`] = `
@supports (display: grid) {
  .emotion-1 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 0.5rem;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }

  @media (min-width: 80rem) {
    .emotion-1 {
      grid-template-columns: repeat(8, 1fr);
      grid-column-end: span 8;
      grid-column-gap: 1rem;
    }
  }
}

@media (min-width: 63rem) {
  .emotion-1 {
    margin: 0 auto;
    max-width: 63rem;
  }
}

@supports (display: grid) {
  .emotion-3 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 80rem) {
    .emotion-3 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }
}

<div>
  <main
    class="emotion-0 emotion-1 emotion-2"
    dir="ltr"
    role="main"
  >
    <div
      class="emotion-3 emotion-2"
      dir="ltr"
    >
      <p>
        CPS page grid
      </p>
    </div>
  </main>
</div>
`;

exports[`Grid should render Grid with columns 1`] = `
@supports (display: grid) {
  .emotion-0 {
    display: grid;
    position: initial;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-0 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-0 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-0 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-0 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-0 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }

  @media (min-width: 80rem) {
    .emotion-0 {
      grid-template-columns: repeat(6, 1fr);
      grid-column-end: span 6;
    }
  }
}

@supports (display: grid) {
  .emotion-2 {
    display: block;
    width: initial;
    margin: 0;
  }

  @media (max-width: 14.9375rem) {
    .emotion-2 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 15rem) and (max-width: 24.9375rem) {
    .emotion-2 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 25rem) and (max-width: 37.4375rem) {
    .emotion-2 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 37.5rem) and (max-width: 62.9375rem) {
    .emotion-2 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 63rem) and (max-width: 79.9375rem) {
    .emotion-2 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }

  @media (min-width: 80rem) {
    .emotion-2 {
      grid-template-columns: repeat(2, 1fr);
      grid-column-end: span 2;
    }
  }
}

<div>
  <div
    class="emotion-0 emotion-1"
    dir="ltr"
  >
    <div
      class="emotion-2 emotion-1"
      dir="ltr"
    >
      <p>
        item spanning 2 out of 6 columns
      </p>
    </div>
  </div>
</div>
`;