src/js/components/Pagination/__tests__/__snapshots__/Pagination-test.tsx.snap
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Pagination should allow user to control page via state with page +
onChange 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c8 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c8 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c8 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c8 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should apply a text component with summary 1`] = `
<DocumentFragment>
.c11 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c11 g {
fill: inherit;
stroke: inherit;
}
.c11 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c11 *[stroke*='#'],
.c11 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c11 *[fill-rule],
.c11 *[FILL-RULE],
.c11 *[fill*='#'],
.c11 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c17 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c17 g {
fill: inherit;
stroke: inherit;
}
.c17 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c17 *[stroke*='#'],
.c17 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c17 *[fill-rule],
.c17 *[FILL-RULE],
.c17 *[fill*='#'],
.c17 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
flex: 0 0 auto;
flex-wrap: wrap;
gap: 12px 6px;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 1 0 auto;
}
.c3 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
}
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
flex-wrap: wrap;
gap: 12px 6px;
}
.c6 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c7 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c12 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c4 {
font-size: 18px;
line-height: 24px;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c13 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c13:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c13:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c13:focus >circle,
.c13:focus >ellipse,
.c13:focus >line,
.c13:focus >path,
.c13:focus >polygon,
.c13:focus >polyline,
.c13:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c13:focus ::-moz-focus-inner {
border: 0;
}
.c13:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c13:focus:not(:focus-visible) >circle,
.c13:focus:not(:focus-visible) >ellipse,
.c13:focus:not(:focus-visible) >line,
.c13:focus:not(:focus-visible) >path,
.c13:focus:not(:focus-visible) >polygon,
.c13:focus:not(:focus-visible) >polyline,
.c13:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c13:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c14 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c14:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c14:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c14:focus >circle,
.c14:focus >ellipse,
.c14:focus >line,
.c14:focus >path,
.c14:focus >polygon,
.c14:focus >polyline,
.c14:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c14:focus ::-moz-focus-inner {
border: 0;
}
.c14:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c14:focus:not(:focus-visible) >circle,
.c14:focus:not(:focus-visible) >ellipse,
.c14:focus:not(:focus-visible) >line,
.c14:focus:not(:focus-visible) >path,
.c14:focus:not(:focus-visible) >polygon,
.c14:focus:not(:focus-visible) >polyline,
.c14:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c14:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c16 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c16 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c16:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c16:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c16:focus >circle,
.c16:focus >ellipse,
.c16:focus >line,
.c16:focus >path,
.c16:focus >polygon,
.c16:focus >polyline,
.c16:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c16:focus ::-moz-focus-inner {
border: 0;
}
.c16:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c16:focus:not(:focus-visible) >circle,
.c16:focus:not(:focus-visible) >ellipse,
.c16:focus:not(:focus-visible) >line,
.c16:focus:not(:focus-visible) >path,
.c16:focus:not(:focus-visible) >polygon,
.c16:focus:not(:focus-visible) >polyline,
.c16:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c16:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c10 {
font-size: 18px;
line-height: 0;
}
.c10 >svg {
margin: 0 auto;
}
.c8 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c15 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c7 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c12 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<div
class="c2"
>
<div
class="c3"
>
<span
class="c4"
>
Showing 1-10 of 237
</span>
</div>
</div>
<div
class="c5"
>
<nav
aria-label="Pagination Navigation"
class="c6"
>
<ul
class="c7"
>
<li
class="c8"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c9 c10"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c11"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c13 c10"
type="button"
>
1
</button>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<button
aria-label="Go to page 2"
class="c14 c10"
type="button"
>
2
</button>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<button
aria-label="Go to page 3"
class="c14 c10"
type="button"
>
3
</button>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<button
aria-label="Go to page 4"
class="c14 c10"
type="button"
>
4
</button>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<button
aria-label="Go to page 5"
class="c14 c10"
type="button"
>
5
</button>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<span
class="c4 c15"
>
…
</span>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<button
aria-label="Go to page 24"
class="c14 c10"
type="button"
>
24
</button>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<button
aria-label="Go to next page"
class="c16 c10"
type="button"
>
<svg
aria-label="Next"
class="c17"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`Pagination should apply a11yTitle and aria-label 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c13 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c13 g {
fill: inherit;
stroke: inherit;
}
.c13 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c12 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c12 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c12:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c12:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus ::-moz-focus-inner {
border: 0;
}
.c12:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="pagination-test"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c9 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c9 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c9 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c9 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c12 c5"
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="pagination-test-2"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c9 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c9 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c9 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c9 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c12 c5"
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should apply button kind style when referenced by a string 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 0;
color: #000000;
border-style: solid;
border-width: 2px;
border-color: skyblue;
padding: 2px 20px;
opacity: 0.3;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
color: #000000;
border-style: solid;
border-width: 2px;
border-color: skyblue;
padding: 2px 20px;
background-color: #33333310;
color: #000000;
background-color: rgba(202, 156, 234, 1);
color: #444444;
border-color: transparent;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 24px;
color: #000000;
border-style: solid;
border-width: 2px;
border-color: skyblue;
padding: 2px 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c12 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 18px;
padding: 4px 22px;
font-size: 18px;
line-height: 0;
color: #000000;
border-style: solid;
border-width: 2px;
border-color: skyblue;
padding: 2px 20px;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c12 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c12:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus ::-moz-focus-inner {
border: 0;
}
.c12:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
}
.c11 {
font-weight: bold;
font-size: undefined;
line-height: undefined;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c9 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c9 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c9 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c9 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c12 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should apply custom theme 1`] = `
.c7 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c7 g {
fill: inherit;
stroke: inherit;
}
.c7 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c7 *[stroke*='#'],
.c7 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c7 *[fill-rule],
.c7 *[FILL-RULE],
.c7 *[fill*='#'],
.c7 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c14 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c14 g {
fill: inherit;
stroke: inherit;
}
.c14 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c14 *[stroke*='#'],
.c14 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c14 *[fill-rule],
.c14 *[FILL-RULE],
.c14 *[fill*='#'],
.c14 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c3 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c8 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c11 {
font-size: 18px;
line-height: 24px;
}
.c5 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c5 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c5:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c5:focus >circle,
.c5:focus >ellipse,
.c5:focus >line,
.c5:focus >path,
.c5:focus >polygon,
.c5:focus >polyline,
.c5:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c5:focus ::-moz-focus-inner {
border: 0;
}
.c5:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c5:focus:not(:focus-visible) >circle,
.c5:focus:not(:focus-visible) >ellipse,
.c5:focus:not(:focus-visible) >line,
.c5:focus:not(:focus-visible) >path,
.c5:focus:not(:focus-visible) >polygon,
.c5:focus:not(:focus-visible) >polyline,
.c5:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c5:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c10 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c10:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c10:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c10:focus >circle,
.c10:focus >ellipse,
.c10:focus >line,
.c10:focus >path,
.c10:focus >polygon,
.c10:focus >polyline,
.c10:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c10:focus ::-moz-focus-inner {
border: 0;
}
.c10:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c10:focus:not(:focus-visible) >circle,
.c10:focus:not(:focus-visible) >ellipse,
.c10:focus:not(:focus-visible) >line,
.c10:focus:not(:focus-visible) >path,
.c10:focus:not(:focus-visible) >polygon,
.c10:focus:not(:focus-visible) >polyline,
.c10:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c10:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c13 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c13 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c13:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c13:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c13:focus >circle,
.c13:focus >ellipse,
.c13:focus >line,
.c13:focus >path,
.c13:focus >polygon,
.c13:focus >polyline,
.c13:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c13:focus ::-moz-focus-inner {
border: 0;
}
.c13:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c13:focus:not(:focus-visible) >circle,
.c13:focus:not(:focus-visible) >ellipse,
.c13:focus:not(:focus-visible) >line,
.c13:focus:not(:focus-visible) >path,
.c13:focus:not(:focus-visible) >polygon,
.c13:focus:not(:focus-visible) >polyline,
.c13:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c13:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c6 {
font-size: 18px;
line-height: 0;
}
.c6 >svg {
margin: 0 auto;
}
.c4 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c12 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
.c2 {
background: red;
}
@media only screen and (max-width: 768px) {
.c3 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c3 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c8 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 c2"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c3"
>
<li
class="c4"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c5 c6"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c7"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c8"
/>
<li
class="c4"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c9 c6"
type="button"
>
1
</button>
</li>
<div
class="c8"
/>
<li
class="c4"
>
<button
aria-label="Go to page 2"
class="c10 c6"
type="button"
>
2
</button>
</li>
<div
class="c8"
/>
<li
class="c4"
>
<button
aria-label="Go to page 3"
class="c10 c6"
type="button"
>
3
</button>
</li>
<div
class="c8"
/>
<li
class="c4"
>
<button
aria-label="Go to page 4"
class="c10 c6"
type="button"
>
4
</button>
</li>
<div
class="c8"
/>
<li
class="c4"
>
<button
aria-label="Go to page 5"
class="c10 c6"
type="button"
>
5
</button>
</li>
<div
class="c8"
/>
<li
class="c4"
>
<span
class="c11 c12"
>
…
</span>
</li>
<div
class="c8"
/>
<li
class="c4"
>
<button
aria-label="Go to page 24"
class="c10 c6"
type="button"
>
24
</button>
</li>
<div
class="c8"
/>
<li
class="c4"
>
<button
aria-label="Go to next page"
class="c13 c6"
type="button"
>
<svg
aria-label="Next"
class="c14"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should apply size 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c13 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c13 g {
fill: inherit;
stroke: inherit;
}
.c13 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c19 {
font-size: 14px;
line-height: 20px;
}
.c27 {
font-size: 22px;
line-height: 28px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c12 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c12 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c12:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c12:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus ::-moz-focus-inner {
border: 0;
}
.c12:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c15 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 3px;
padding: 4px 4px;
font-size: 14px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c15 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c15:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c15:focus >circle,
.c15:focus >ellipse,
.c15:focus >line,
.c15:focus >path,
.c15:focus >polygon,
.c15:focus >polyline,
.c15:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c15:focus ::-moz-focus-inner {
border: 0;
}
.c15:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c15:focus:not(:focus-visible) >circle,
.c15:focus:not(:focus-visible) >ellipse,
.c15:focus:not(:focus-visible) >line,
.c15:focus:not(:focus-visible) >path,
.c15:focus:not(:focus-visible) >polygon,
.c15:focus:not(:focus-visible) >polyline,
.c15:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c15:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c17 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 3px;
padding: 4px 4px;
font-size: 14px;
line-height: 20px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c17:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c17:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c17:focus >circle,
.c17:focus >ellipse,
.c17:focus >line,
.c17:focus >path,
.c17:focus >polygon,
.c17:focus >polyline,
.c17:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c17:focus ::-moz-focus-inner {
border: 0;
}
.c17:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c17:focus:not(:focus-visible) >circle,
.c17:focus:not(:focus-visible) >ellipse,
.c17:focus:not(:focus-visible) >line,
.c17:focus:not(:focus-visible) >path,
.c17:focus:not(:focus-visible) >polygon,
.c17:focus:not(:focus-visible) >polyline,
.c17:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c17:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c18 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 3px;
padding: 4px 4px;
font-size: 14px;
line-height: 20px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c18:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c18:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c18:focus >circle,
.c18:focus >ellipse,
.c18:focus >line,
.c18:focus >path,
.c18:focus >polygon,
.c18:focus >polyline,
.c18:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c18:focus ::-moz-focus-inner {
border: 0;
}
.c18:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c18:focus:not(:focus-visible) >circle,
.c18:focus:not(:focus-visible) >ellipse,
.c18:focus:not(:focus-visible) >line,
.c18:focus:not(:focus-visible) >path,
.c18:focus:not(:focus-visible) >polygon,
.c18:focus:not(:focus-visible) >polyline,
.c18:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c18:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c21 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 3px;
padding: 4px 4px;
font-size: 14px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c21 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c21:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c21:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c21:focus >circle,
.c21:focus >ellipse,
.c21:focus >line,
.c21:focus >path,
.c21:focus >polygon,
.c21:focus >polyline,
.c21:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c21:focus ::-moz-focus-inner {
border: 0;
}
.c21:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c21:focus:not(:focus-visible) >circle,
.c21:focus:not(:focus-visible) >ellipse,
.c21:focus:not(:focus-visible) >line,
.c21:focus:not(:focus-visible) >path,
.c21:focus:not(:focus-visible) >polygon,
.c21:focus:not(:focus-visible) >polyline,
.c21:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c21:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c23 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 6px;
padding: 4px 4px;
font-size: 22px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c23 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c23:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c23:focus >circle,
.c23:focus >ellipse,
.c23:focus >line,
.c23:focus >path,
.c23:focus >polygon,
.c23:focus >polyline,
.c23:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c23:focus ::-moz-focus-inner {
border: 0;
}
.c23:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c23:focus:not(:focus-visible) >circle,
.c23:focus:not(:focus-visible) >ellipse,
.c23:focus:not(:focus-visible) >line,
.c23:focus:not(:focus-visible) >path,
.c23:focus:not(:focus-visible) >polygon,
.c23:focus:not(:focus-visible) >polyline,
.c23:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c23:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c25 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 6px;
padding: 4px 4px;
font-size: 22px;
line-height: 28px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c25:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c25:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c25:focus >circle,
.c25:focus >ellipse,
.c25:focus >line,
.c25:focus >path,
.c25:focus >polygon,
.c25:focus >polyline,
.c25:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c25:focus ::-moz-focus-inner {
border: 0;
}
.c25:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c25:focus:not(:focus-visible) >circle,
.c25:focus:not(:focus-visible) >ellipse,
.c25:focus:not(:focus-visible) >line,
.c25:focus:not(:focus-visible) >path,
.c25:focus:not(:focus-visible) >polygon,
.c25:focus:not(:focus-visible) >polyline,
.c25:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c25:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c26 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 6px;
padding: 4px 4px;
font-size: 22px;
line-height: 28px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c26:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c26:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c26:focus >circle,
.c26:focus >ellipse,
.c26:focus >line,
.c26:focus >path,
.c26:focus >polygon,
.c26:focus >polyline,
.c26:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c26:focus ::-moz-focus-inner {
border: 0;
}
.c26:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c26:focus:not(:focus-visible) >circle,
.c26:focus:not(:focus-visible) >ellipse,
.c26:focus:not(:focus-visible) >line,
.c26:focus:not(:focus-visible) >path,
.c26:focus:not(:focus-visible) >polygon,
.c26:focus:not(:focus-visible) >polyline,
.c26:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c26:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c29 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 6px;
padding: 4px 4px;
font-size: 22px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c29 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c29:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c29:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c29:focus >circle,
.c29:focus >ellipse,
.c29:focus >line,
.c29:focus >path,
.c29:focus >polygon,
.c29:focus >polyline,
.c29:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c29:focus ::-moz-focus-inner {
border: 0;
}
.c29:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c29:focus:not(:focus-visible) >circle,
.c29:focus:not(:focus-visible) >ellipse,
.c29:focus:not(:focus-visible) >line,
.c29:focus:not(:focus-visible) >path,
.c29:focus:not(:focus-visible) >polygon,
.c29:focus:not(:focus-visible) >polyline,
.c29:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c29:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c16 {
font-size: 14px;
line-height: 0;
}
.c16 >svg {
margin: 0 auto;
}
.c24 {
font-size: 22px;
line-height: 0;
}
.c24 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c14 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 30px;
min-width: 30px;
}
.c22 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 48px;
min-width: 48px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
.c20 {
font-weight: bold;
font-size: 14px;
line-height: 0;
}
.c28 {
font-weight: bold;
font-size: 22px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c9 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c9 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c9 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c9 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c12 c5"
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c14"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c15 c16"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c14"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c17 c16"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c14"
>
<button
aria-label="Go to page 2"
class="c18 c16"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c14"
>
<button
aria-label="Go to page 3"
class="c18 c16"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c14"
>
<button
aria-label="Go to page 4"
class="c18 c16"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c14"
>
<button
aria-label="Go to page 5"
class="c18 c16"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c14"
>
<span
class="c19 c20"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c14"
>
<button
aria-label="Go to page 24"
class="c18 c16"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c14"
>
<button
aria-label="Go to next page"
class="c21 c16"
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c22"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c23 c24"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c22"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c25 c24"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c22"
>
<button
aria-label="Go to page 2"
class="c26 c24"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c22"
>
<button
aria-label="Go to page 3"
class="c26 c24"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c22"
>
<button
aria-label="Go to page 4"
class="c26 c24"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c22"
>
<button
aria-label="Go to page 5"
class="c26 c24"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c22"
>
<span
class="c27 c28"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c22"
>
<button
aria-label="Go to page 24"
class="c26 c24"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c22"
>
<button
aria-label="Go to next page"
class="c29 c24"
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should change the page on prop change 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c8 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c8 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c8 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c8 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should disable next button if on last page 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c13 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c13 g {
fill: inherit;
stroke: inherit;
}
.c13 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c9 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c11 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c11:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c11:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus ::-moz-focus-inner {
border: 0;
}
.c11:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c12 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c12 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c12:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus ::-moz-focus-inner {
border: 0;
}
.c12:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c10 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c9 c10"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 20"
class="c8 c5"
type="button"
>
20
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 21"
class="c8 c5"
type="button"
>
21
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 22"
class="c8 c5"
type="button"
>
22
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 23"
class="c8 c5"
type="button"
>
23
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 24"
class="c11 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to next page"
class="c12 c5"
disabled=""
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should disable previous and next controls when numberItems
< step 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to next page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should disable previous and next controls when numberItems
=== 0 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should disable previous and next controls when numberItems
=== step 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to next page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should disable previous button if on first page 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c13 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c13 g {
fill: inherit;
stroke: inherit;
}
.c13 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c12 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c12 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c12:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c12:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus ::-moz-focus-inner {
border: 0;
}
.c12:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c9 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c9 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c9 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c9 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c12 c5"
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should display next page of results when "next" is
selected 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c8 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c8 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c8 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c8 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should display next page of results when "next" is
selected 2`] = `
<div
class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
<div
class="StyledBox-sc-13pk1d4-0 jVblXS Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="StyledBox-sc-13pk1d4-0 jVblXS"
>
<ul
class="StyledBox-sc-13pk1d4-0 gNgJln"
>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to previous page"
class="StyledButtonKind-sc-1vhfpnt-0 fcLGGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
<svg
aria-label="Previous"
class="StyledIcon-sc-ofa7kd-0 cIGXsc"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 1"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
1
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-current="page"
aria-label="Go to page 2"
class="StyledButtonKind-sc-1vhfpnt-0 eGPZXe StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
2
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 3"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
3
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 4"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
4
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 5"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
5
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<span
class="StyledText-sc-1sadyjn-0 dahhea StyledPageControl__StyledSeparator-sc-1vlfaez-2 gdMvuz"
>
…
</span>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 24"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
24
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to next page"
class="StyledButtonKind-sc-1vhfpnt-0 fcLGGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
<svg
aria-label="Next"
class="StyledIcon-sc-ofa7kd-0 cIGXsc"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should display page 'n' of results when "page n" is
selected 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c8 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c8 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c8 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c8 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should display previous page of results when "previous" is
selected 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c8 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c8 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c8 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c8 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should display previous page of results when "previous" is
selected 2`] = `
<div
class="StyledGrommet-sc-19lkkz7-0 gyimNE"
>
<div
class="StyledBox-sc-13pk1d4-0 jVblXS Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="StyledBox-sc-13pk1d4-0 jVblXS"
>
<ul
class="StyledBox-sc-13pk1d4-0 gNgJln"
>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to previous page"
class="StyledButtonKind-sc-1vhfpnt-0 fcLGGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
<svg
aria-label="Previous"
class="StyledIcon-sc-ofa7kd-0 cIGXsc"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 1"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
1
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-current="page"
aria-label="Go to page 2"
class="StyledButtonKind-sc-1vhfpnt-0 eGPZXe StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
2
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 3"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
3
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 4"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
4
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 5"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
5
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<span
class="StyledText-sc-1sadyjn-0 dahhea StyledPageControl__StyledSeparator-sc-1vlfaez-2 gdMvuz"
>
…
</span>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to page 24"
class="StyledButtonKind-sc-1vhfpnt-0 jCueGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
24
</button>
</li>
<div
class="StyledBox__StyledBoxGap-sc-13pk1d4-1 kEhenB"
/>
<li
class="StyledPageControl__StyledContainer-sc-1vlfaez-1 cmoeSi"
>
<button
aria-label="Go to next page"
class="StyledButtonKind-sc-1vhfpnt-0 fcLGGg StyledPageControl__StyledPaginationButton-sc-1vlfaez-0 gTQDxy"
type="button"
>
<svg
aria-label="Next"
class="StyledIcon-sc-ofa7kd-0 cIGXsc"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should display the correct last page based on items length
and step 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c13 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c13 g {
fill: inherit;
stroke: inherit;
}
.c13 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c12 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c12 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c12:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c12:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus ::-moz-focus-inner {
border: 0;
}
.c12:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c9 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 4"
class="c9 c5"
type="button"
>
4
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 5"
class="c9 c5"
type="button"
>
5
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c9 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c12 c5"
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should have no items 1`] = `
<DocumentFragment>
.c11 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c11 g {
fill: inherit;
stroke: inherit;
}
.c11 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c11 *[stroke*='#'],
.c11 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c11 *[fill-rule],
.c11 *[FILL-RULE],
.c11 *[fill*='#'],
.c11 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
flex: 0 0 auto;
flex-wrap: wrap;
gap: 12px 6px;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 1 0 auto;
}
.c3 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
}
.c5 {
display: flex;
box-sizing: border-box;
max-width: 100%;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
flex-wrap: wrap;
gap: 12px 6px;
}
.c6 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c7 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c12 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c4 {
font-size: 18px;
line-height: 24px;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c10 {
font-size: 18px;
line-height: 0;
}
.c10 >svg {
margin: 0 auto;
}
.c8 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
@media only screen and (max-width: 768px) {
.c7 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c12 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<div
class="c2"
>
<div
class="c3"
>
<span
class="c4"
>
0 items
</span>
</div>
</div>
<div
class="c5"
>
<nav
aria-label="Pagination Navigation"
class="c6"
>
<ul
class="c7"
>
<li
class="c8"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c9 c10"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c11"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c12"
/>
<li
class="c8"
>
<button
aria-label="Go to next page"
class="c9 c10"
disabled=""
type="button"
>
<svg
aria-label="Next"
class="c11"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
</div>
</DocumentFragment>
`;
exports[`Pagination should render correct numberEdgePages 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c9 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c11 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c11:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c11:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus ::-moz-focus-inner {
border: 0;
}
.c11:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c10 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 2"
class="c8 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c8 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c9 c10"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 9"
class="c8 c5"
type="button"
>
9
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 10"
class="c11 c5"
type="button"
>
10
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 11"
class="c8 c5"
type="button"
>
11
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c9 c10"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 22"
class="c8 c5"
type="button"
>
22
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 23"
class="c8 c5"
type="button"
>
23
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c8 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should render correct numberMiddlePages when even 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c9 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c11 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c11:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c11:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus ::-moz-focus-inner {
border: 0;
}
.c11:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c10 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c9 c10"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 9"
class="c8 c5"
type="button"
>
9
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 10"
class="c11 c5"
type="button"
>
10
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 11"
class="c8 c5"
type="button"
>
11
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 12"
class="c8 c5"
type="button"
>
12
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c9 c10"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c8 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should render correct numberMiddlePages when odd 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c9 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c11 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c11:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c11:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus ::-moz-focus-inner {
border: 0;
}
.c11:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c10 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c9 c10"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 8"
class="c8 c5"
type="button"
>
8
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 9"
class="c8 c5"
type="button"
>
9
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 10"
class="c11 c5"
type="button"
>
10
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 11"
class="c8 c5"
type="button"
>
11
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 12"
class="c8 c5"
type="button"
>
12
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c9 c10"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c8 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c4 c5"
type="button"
>
<svg
aria-label="Next"
class="c6"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should set numberMiddlePages = 1 if user provides value < 1 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c13 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c13 g {
fill: inherit;
stroke: inherit;
}
.c13 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c10 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c9 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c9:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c9:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus >circle,
.c9:focus >ellipse,
.c9:focus >line,
.c9:focus >path,
.c9:focus >polygon,
.c9:focus >polyline,
.c9:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c9:focus ::-moz-focus-inner {
border: 0;
}
.c9:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) >circle,
.c9:focus:not(:focus-visible) >ellipse,
.c9:focus:not(:focus-visible) >line,
.c9:focus:not(:focus-visible) >path,
.c9:focus:not(:focus-visible) >polygon,
.c9:focus:not(:focus-visible) >polyline,
.c9:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c9:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c12 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c12 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c12:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c12:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus ::-moz-focus-inner {
border: 0;
}
.c12:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c11 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to previous page"
class="c4 c5"
disabled=""
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 2"
class="c9 c5"
type="button"
>
2
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 3"
class="c9 c5"
type="button"
>
3
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c10 c11"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 24"
class="c9 c5"
type="button"
>
24
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to next page"
class="c12 c5"
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;
exports[`Pagination should set page to last page if page prop > total possible
pages 1`] = `
.c6 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #000000;
stroke: #000000;
}
.c6 g {
fill: inherit;
stroke: inherit;
}
.c6 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c6 *[stroke*='#'],
.c6 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c6 *[fill-rule],
.c6 *[FILL-RULE],
.c6 *[fill*='#'],
.c6 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c13 {
display: inline-block;
flex: 0 0 auto;
width: 24px;
height: 24px;
fill: #666666;
stroke: #666666;
}
.c13 g {
fill: inherit;
stroke: inherit;
}
.c13 *:not([stroke])[fill='none'] {
stroke-width: 0;
}
.c13 *[stroke*='#'],
.c13 *[STROKE*='#'] {
stroke: inherit;
fill: none;
}
.c13 *[fill-rule],
.c13 *[FILL-RULE],
.c13 *[fill*='#'],
.c13 *[FILL*='#'] {
fill: inherit;
stroke: none;
}
.c0 {
font-size: 18px;
line-height: 24px;
box-sizing: border-box;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-moz-osx-font-smoothing: grayscale;
-webkit-font-smoothing: antialiased;
}
.c1 {
display: flex;
box-sizing: border-box;
max-width: 100%;
min-width: 0;
min-height: 0;
flex-direction: column;
flex: 0 0 auto;
}
.c2 {
display: flex;
box-sizing: border-box;
max-width: 100%;
margin: 0px;
align-items: center;
min-width: 0;
min-height: 0;
flex-direction: row;
padding: 0px;
}
.c7 {
flex: 0 0 auto;
align-self: stretch;
width: 3px;
}
.c9 {
font-size: 18px;
line-height: 24px;
}
.c4 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c4 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c4:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c4:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus >circle,
.c4:focus >ellipse,
.c4:focus >line,
.c4:focus >path,
.c4:focus >polygon,
.c4:focus >polyline,
.c4:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c4:focus ::-moz-focus-inner {
border: 0;
}
.c4:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) >circle,
.c4:focus:not(:focus-visible) >ellipse,
.c4:focus:not(:focus-visible) >line,
.c4:focus:not(:focus-visible) >path,
.c4:focus:not(:focus-visible) >polygon,
.c4:focus:not(:focus-visible) >polyline,
.c4:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c4:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c8 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
color: #000000;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c8:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c8:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus >circle,
.c8:focus >ellipse,
.c8:focus >line,
.c8:focus >path,
.c8:focus >polygon,
.c8:focus >polyline,
.c8:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c8:focus ::-moz-focus-inner {
border: 0;
}
.c8:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) >circle,
.c8:focus:not(:focus-visible) >ellipse,
.c8:focus:not(:focus-visible) >line,
.c8:focus:not(:focus-visible) >path,
.c8:focus:not(:focus-visible) >polygon,
.c8:focus:not(:focus-visible) >polyline,
.c8:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c8:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c11 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
background-color: rgba(221, 221, 221, 0.4);
color: #000000;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 24px;
background-color: rgba(51, 51, 51, 0.06274509803921569);
color: #444444;
text-align: center;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c11:hover {
background-color: rgba(51, 51, 51, 0.06274509803921569);
}
.c11:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus >circle,
.c11:focus >ellipse,
.c11:focus >line,
.c11:focus >path,
.c11:focus >polygon,
.c11:focus >polyline,
.c11:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c11:focus ::-moz-focus-inner {
border: 0;
}
.c11:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) >circle,
.c11:focus:not(:focus-visible) >ellipse,
.c11:focus:not(:focus-visible) >line,
.c11:focus:not(:focus-visible) >path,
.c11:focus:not(:focus-visible) >polygon,
.c11:focus:not(:focus-visible) >polyline,
.c11:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c11:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c12 {
display: inline-block;
box-sizing: border-box;
cursor: pointer;
font: inherit;
text-decoration: none;
margin: 0;
background: transparent;
overflow: visible;
text-transform: none;
border: none;
border-radius: 4px;
padding: 4px 4px;
font-size: 18px;
line-height: 0;
text-align: center;
opacity: 0.3;
cursor: default;
transition-property: color,background-color,border-color,box-shadow;
transition-duration: 0.1s;
transition-timing-function: ease-in-out;
width: 100%;
height: 100%;
max-width: none;
flex: 1 0 auto;
}
.c12 >svg {
display: flex;
align-self: center;
vertical-align: middle;
}
.c12:focus {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus >circle,
.c12:focus >ellipse,
.c12:focus >line,
.c12:focus >path,
.c12:focus >polygon,
.c12:focus >polyline,
.c12:focus >rect {
outline: none;
box-shadow: 0 0 2px 2px #6FFFB0;
}
.c12:focus ::-moz-focus-inner {
border: 0;
}
.c12:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) >circle,
.c12:focus:not(:focus-visible) >ellipse,
.c12:focus:not(:focus-visible) >line,
.c12:focus:not(:focus-visible) >path,
.c12:focus:not(:focus-visible) >polygon,
.c12:focus:not(:focus-visible) >polyline,
.c12:focus:not(:focus-visible) >rect {
outline: none;
box-shadow: none;
}
.c12:focus:not(:focus-visible) ::-moz-focus-inner {
border: 0;
}
.c5 {
font-size: 18px;
line-height: 0;
}
.c5 >svg {
margin: 0 auto;
}
.c3 {
display: flex;
align-items: center;
justify-content: center;
max-width: 100%;
height: 36px;
min-width: 36px;
}
.c10 {
font-weight: bold;
font-size: 18px;
line-height: 0;
}
@media only screen and (max-width: 768px) {
.c2 {
margin: 0px;
}
}
@media only screen and (max-width: 768px) {
.c2 {
padding: 0px;
}
}
@media only screen and (max-width: 768px) {
.c7 {
width: 2px;
}
}
<div
class="c0"
>
<div
class="c1 Pagination__StyledPaginationContainer-sc-rnlw6m-0"
>
<nav
aria-label="Pagination Navigation"
class="c1"
>
<ul
class="c2"
>
<li
class="c3"
>
<button
aria-label="Go to previous page"
class="c4 c5"
type="button"
>
<svg
aria-label="Previous"
class="c6"
viewBox="0 0 24 24"
>
<path
d="M17 2 7 12l10 10"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 1"
class="c8 c5"
type="button"
>
1
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<span
class="c9 c10"
>
…
</span>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 6"
class="c8 c5"
type="button"
>
6
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 7"
class="c8 c5"
type="button"
>
7
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 8"
class="c8 c5"
type="button"
>
8
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-label="Go to page 9"
class="c8 c5"
type="button"
>
9
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-current="page"
aria-label="Go to page 10"
class="c11 c5"
type="button"
>
10
</button>
</li>
<div
class="c7"
/>
<li
class="c3"
>
<button
aria-disabled="true"
aria-label="Go to next page"
class="c12 c5"
disabled=""
type="button"
>
<svg
aria-label="Next"
class="c13"
viewBox="0 0 24 24"
>
<path
d="m7 2 10 10L7 22"
fill="none"
stroke="#000"
stroke-width="2"
/>
</svg>
</button>
</li>
</ul>
</nav>
</div>
</div>
`;