-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Pager styled with design tokens #106
Changes from all commits
c718b1c
94390a7
2d34c0e
76c350e
243d803
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,45 @@ | ||
.pager { | ||
margin: var(--spacing-xl) 0; | ||
} | ||
|
||
.pager__items { | ||
@include list-reset; | ||
|
||
text-align: center; | ||
} | ||
|
||
.pager__item { | ||
display: inline-block; | ||
margin: 0; | ||
} | ||
|
||
.pager__link { | ||
padding: var(--pager-padding-y) var(--pager-padding-x); | ||
color: var(--pager-color-text-default); | ||
text-decoration: none; | ||
|
||
&:hover, | ||
&:focus { | ||
color: var(--pager-color-text-hover); | ||
background-color: var(--pager-color-fill-hover); | ||
} | ||
|
||
&.is-active { | ||
color: var(--pager-color-text-focus); | ||
} | ||
} | ||
|
||
.pager__link.is-active { | ||
&:hover, | ||
&:focus { | ||
color: var(--pager-color-text-hover); | ||
} | ||
} | ||
|
||
.pager__link--next, | ||
.pager__link--prev, | ||
.pager__link--first, | ||
.pager__link--last { | ||
display: block; | ||
padding: var(--pager-padding-y) var(--pager-padding-x); | ||
} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,20 @@ | ||
current: 5 | ||
ellipses: | ||
previous: true | ||
next: true | ||
items: | ||
previous: | ||
href: '#' | ||
next: | ||
href: '#' | ||
pages: | ||
3: | ||
href: '#' | ||
4: | ||
href: '#' | ||
5: | ||
href: '#' | ||
6: | ||
href: '#' | ||
7: | ||
href: '#' |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
current: 10 | ||
ellipses: | ||
previous: true | ||
next: true | ||
items: | ||
first: | ||
href: '#' | ||
last: | ||
href: '#' | ||
previous: | ||
href: '#' | ||
next: | ||
href: '#' | ||
pages: | ||
9: | ||
href: '#' | ||
10: | ||
href: '#' | ||
11: | ||
href: '#' | ||
12: | ||
href: '#' | ||
13: | ||
href: '#' |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
current: 5 | ||
ellipses: | ||
next: true | ||
items: | ||
next: | ||
href: '#' | ||
pages: | ||
1: | ||
href: '#' | ||
2: | ||
href: '#' | ||
3: | ||
href: '#' | ||
4: | ||
href: '#' | ||
5: | ||
href: '#' |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
current: 8 | ||
ellipses: | ||
previous: true | ||
items: | ||
previous: | ||
href: '#' | ||
pages: | ||
5: | ||
href: '#' | ||
6: | ||
href: '#' | ||
7: | ||
href: '#' | ||
8: | ||
href: '#' | ||
9: | ||
href: '#' |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,24 @@ | ||
import pager from './pager.twig'; | ||
|
||
import pagerData from './pager.yml'; | ||
import pagerNextEllipsesData from './pager-next-ellipses.yml'; | ||
import pagerPrevEllipsesData from './pager-prev-ellipses.yml'; | ||
import pagerBothEllipsesData from './pager-both-ellipses.yml'; | ||
import pagerFirstLastData from './pager-first-last.yml'; | ||
|
||
/** | ||
* Storybook Definition. | ||
*/ | ||
export default { title: 'Components/Pager' }; | ||
|
||
export const basic = () => pager(pagerData); | ||
|
||
export const withNext = () => pager({ ...pagerData, ...pagerNextEllipsesData }); | ||
|
||
export const withBoth = () => pager({ ...pagerData, ...pagerBothEllipsesData }); | ||
|
||
export const withPrevious = () => | ||
pager({ ...pagerData, ...pagerPrevEllipsesData }); | ||
|
||
export const withFirstAndLast = () => | ||
pager({ ...pagerData, ...pagerFirstLastData }); |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,103 @@ | ||
{# | ||
/** | ||
* @file | ||
* Theme override to display a pager. | ||
* | ||
* Available variables: | ||
* - items: List of pager items. | ||
* The list is keyed by the following elements: | ||
* - first: Item for the first page; not present on the first page of results. | ||
* - previous: Item for the previous page; not present on the first page | ||
* of results. | ||
* - next: Item for the next page; not present on the last page of results. | ||
* - last: Item for the last page; not present on the last page of results. | ||
* - pages: List of pages, keyed by page number. | ||
* Sub-sub elements: | ||
* items.first, items.previous, items.next, items.last, and each item inside | ||
* items.pages contain the following elements: | ||
* - href: URL with appropriate query parameters for the item. | ||
* - attributes: A keyed list of HTML attributes for the item. | ||
* - text: The visible text used for the item link, such as "‹ Previous" | ||
* or "Next ›". | ||
* - current: The page number of the current page. | ||
* - ellipses: If there are more pages than the quantity allows, then an | ||
* ellipsis before or after the listed pages may be present. | ||
* - previous: Present if the currently visible list of pages does not start | ||
* at the first page. | ||
* - next: Present if the visible list of pages ends before the last page. | ||
* | ||
* @see template_preprocess_pager() | ||
*/ | ||
#} | ||
{% set pager__base_class = 'pager' %} | ||
|
||
{% set pager__attributes = pager__attributes|default({ | ||
'class': bem(pager__base_class, pager__modifiers, pager__blockname), | ||
'aria-label': pagination_id|default('Pagination'|t), | ||
'role': 'navigation' | ||
}) %} | ||
|
||
{% if items %} | ||
<nav {{ add_attributes(pager__attributes) }}> | ||
<ul {{ bem('items', [], pager__base_class, ['js-pager__items']) }}> | ||
{# Print first item. #} | ||
{% if items.first %} | ||
<li {{ bem('item', ['first'], pager__base_class) }}> | ||
<a {{ bem('link', ['first'], pager__base_class) }} href="{{ items.first.href }}" title="{{ 'Go to first page'|t }}" {{ items.first.attributes|without('href', 'title', 'rel') }}> | ||
<span {{ bem('visually-hidden') }}>{{ 'First page'|t }}</span> | ||
<span aria-hidden="true">{{ items.first.text|default('First'|t) }}</span> | ||
</a> | ||
</li> | ||
{% endif %} | ||
{# Print previous item if we are not on the first page. #} | ||
{% if items.previous %} | ||
<li {{ bem('item', ['prev'], pager__base_class) }}> | ||
<a {{ bem('link', ['prev'], pager__base_class) }} href="{{ items.previous.href }}" title="{{ 'Go to previous page'|t }}" rel="prev"{{ items.previous.attributes|without('href', 'title', 'rel') }}> | ||
<span {{ bem('visually-hidden') }}>{{ 'Previous page'|t }}</span> | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. If we are only adding a single class, should the span be There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. @amazingrando Oh! I just copy-paste what it was already of the compound components. That's why it's like that, but you're right |
||
<span aria-hidden="true">{{ items.previous.text|default('Previous'|t) }}</span> | ||
</a> | ||
</li> | ||
{% endif %} | ||
{# Add an ellipsis if there are further previous pages. #} | ||
{% if ellipses.previous %} | ||
<li {{ bem('item', ['ellipsis'], pager__base_class) }} role="presentation">…</li> | ||
{% endif %} | ||
{# Now generate the actual pager piece. #} | ||
{% for key, item in items.pages %} | ||
{% set current_class = current == key ? 'is-active' : '' %} | ||
{% set aria_current = current == key ? 'aria-current="page"' : '' %} | ||
<li {{ bem('item', [], pager__base_class, [current_class]) }}> | ||
{% set title = current == key ? 'Current page'|t : 'Go to page @key'|t({'@key': key}) %} | ||
<a {{ bem('link', [], pager__base_class, [current_class]) }} href="{{ item.href }}" title="{{ title }}"{{ item.attributes|without('href', 'title') }} {{ aria_current }}> | ||
<span {{ bem('visually-hidden') }}> | ||
{{ current == key ? 'Current page'|t : 'Page '|t }} | ||
</span> | ||
{{- key -}} | ||
</a> | ||
</li> | ||
{% endfor %} | ||
{# Add an ellipsis if there are further next pages. #} | ||
{% if ellipses.next %} | ||
<li {{ bem('item', ['ellipsis'], pager__base_class) }} role="presentation">…</li> | ||
{% endif %} | ||
{# Print next item if we are not on the last page. #} | ||
{% if items.next %} | ||
<li {{ bem('item', ['next'], pager__base_class) }}> | ||
<a {{ bem('link', ['next'], pager__base_class) }} href="{{ items.next.href }}" title="{{ 'Go to next page'|t }}" rel="next"{{ items.next.attributes|without('href', 'title', 'rel') }}> | ||
<span {{ bem('visually-hidden') }}>{{ 'Next page'|t }}</span> | ||
<span aria-hidden="true">{{ items.next.text|default('Next'|t) }}</span> | ||
</a> | ||
</li> | ||
{% endif %} | ||
{# Print last item. #} | ||
{% if items.last %} | ||
<li {{ bem('item', ['last'], pager__base_class) }}> | ||
<a {{ bem('link', ['last'], pager__base_class) }} href="{{ items.last.href }}" title="{{ 'Go to last page'|t }}" {{ items.last.attributes|without('href', 'title', 'rel') }}> | ||
<span {{ bem('visually-hidden') }}>{{ 'Last page'|t }}</span> | ||
<span aria-hidden="true">{{ items.last.text|default('Last'|t) }}</span> | ||
</a> | ||
</li> | ||
{% endif %} | ||
</ul> | ||
</nav> | ||
{% endif %} |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,16 @@ | ||
current: 3 | ||
ellipses: | ||
next: false | ||
prev: false | ||
items: | ||
pages: | ||
1: | ||
href: '#' | ||
2: | ||
href: '#' | ||
3: | ||
href: '#' | ||
4: | ||
href: '#' | ||
5: | ||
href: '#' |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
What do you think about making this
pager__base_class = pager__base_class|default('pager')
to make it easy to override the base class?