Skip to content

Commit

Permalink
refactor: update pagination arrows to match design
Browse files Browse the repository at this point in the history
  • Loading branch information
@melaniebmn
melaniebmn committed Jan 7, 2025
1 parent 450d182 commit c98114f
Show file tree
Hide file tree
Showing 2 changed files with 28 additions and 28 deletions.
8 changes: 4 additions & 4 deletions packages/web/src/components/gcds-pagination/gcds-pagination.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,7 +174,7 @@ export class GcdsPagination {
}
>
{I18N[this.lang].next}
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
) : (
<a
Expand All @@ -185,7 +185,7 @@ export class GcdsPagination {
: 'gcds-pagination-end-button-mobile'
}
>
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
{mobile
? I18N[this.lang].previousMobile
: I18N[this.lang].previous}
Expand Down Expand Up @@ -399,7 +399,7 @@ export class GcdsPagination {
onFocus={() => this.gcdsFocus.emit()}
onClick={e => emitEvent(e, this.gcdsClick, previousHref)}
>
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
<div class="gcds-pagination-simple-text">
{I18N[lang].previous}
</div>
Expand All @@ -422,7 +422,7 @@ export class GcdsPagination {
{I18N[lang].next}
</div>
<span>{nextLabel}</span>
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
)}
Expand Down
48 changes: 24 additions & 24 deletions packages/web/src/components/gcds-pagination/test/gcds-pagination.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ describe('gcds-pagination', () => {
<ul class="gcds-pagination-simple">
<li class="gcds-pagination-simple-previous">
<a aria-label="Previous page: Previous label" href="#previous">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
<div class="gcds-pagination-simple-text">
Previous
</div>
Expand All @@ -39,7 +39,7 @@ describe('gcds-pagination', () => {
<span>
Next label
</span>
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
Expand Down Expand Up @@ -67,7 +67,7 @@ describe('gcds-pagination', () => {
<ul class="gcds-pagination-simple">
<li class="gcds-pagination-simple-previous">
<a aria-label="Previous page" href="#previous">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
<div class="gcds-pagination-simple-text">
Previous
</div>
Expand All @@ -82,7 +82,7 @@ describe('gcds-pagination', () => {
</div>
<span>
</span>
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
Expand Down Expand Up @@ -112,7 +112,7 @@ describe('gcds-pagination', () => {
<ul class="gcds-pagination-simple">
<li class="gcds-pagination-simple-previous">
<a aria-label="Page précédente: Previous label" href="#previous">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
<div class="gcds-pagination-simple-text">
Précédent
</div>
Expand All @@ -129,7 +129,7 @@ describe('gcds-pagination', () => {
<span>
Next label
</span>
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
Expand Down Expand Up @@ -157,7 +157,7 @@ describe('gcds-pagination', () => {
<ul class="gcds-pagination-simple">
<li class="gcds-pagination-simple-previous">
<a aria-label="Page précédente" href="#previous">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
<div class="gcds-pagination-simple-text">
Précédent
</div>
Expand All @@ -172,7 +172,7 @@ describe('gcds-pagination', () => {
</div>
<span>
</span>
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
Expand Down Expand Up @@ -202,7 +202,7 @@ describe('gcds-pagination', () => {
<ul class="gcds-pagination-list">
<li>
<a aria-label="Previous page: Page 4 of 9 of Search results" class="gcds-pagination-end-button" href="javascript:void(0)">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
Previous
</a>
</li>
Expand Down Expand Up @@ -264,21 +264,21 @@ describe('gcds-pagination', () => {
<li>
<a aria-label="Next page: Page 6 of 9 of Search results" class="gcds-pagination-end-button" href="javascript:void(0)">
Next
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
<ul class="gcds-pagination-list-mobile-prevnext">
<li>
<a aria-label="Previous page: Page 4 of 9 of Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
Prev
</a>
</li>
<li>
<a aria-label="Next page: Page 6 of 9 of Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)">
Next
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
Expand Down Expand Up @@ -309,7 +309,7 @@ describe('gcds-pagination', () => {
<ul class="gcds-pagination-list">
<li>
<a aria-label="Previous page: Page 9 of 20 of Search results" class="gcds-pagination-end-button" href="javascript:void(0)">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
Previous
</a>
</li>
Expand Down Expand Up @@ -361,21 +361,21 @@ describe('gcds-pagination', () => {
<li>
<a aria-label="Next page: Page 11 of 20 of Search results" class="gcds-pagination-end-button" href="javascript:void(0)">
Next
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
<ul class="gcds-pagination-list-mobile-prevnext">
<li>
<a aria-label="Previous page: Page 9 of 20 of Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
Prev
</a>
</li>
<li>
<a aria-label="Next page: Page 11 of 20 of Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)">
Next
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
Expand Down Expand Up @@ -406,7 +406,7 @@ describe('gcds-pagination', () => {
<ul class="gcds-pagination-list">
<li>
<a aria-label="Page précédente: Page 4 sur 9 des Search results" class="gcds-pagination-end-button" href="javascript:void(0)">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
Précédent
</a>
</li>
Expand Down Expand Up @@ -468,21 +468,21 @@ describe('gcds-pagination', () => {
<li>
<a aria-label="Page suivante: Page 6 sur 9 des Search results" class="gcds-pagination-end-button" href="javascript:void(0)">
Suivante
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
<ul class="gcds-pagination-list-mobile-prevnext">
<li>
<a aria-label="Page précédente: Page 4 sur 9 des Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
Préc.
</a>
</li>
<li>
<a aria-label="Page suivante: Page 6 sur 9 des Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)">
Suivante
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
Expand Down Expand Up @@ -513,7 +513,7 @@ describe('gcds-pagination', () => {
<ul class="gcds-pagination-list">
<li>
<a aria-label="Page précédente: Page 9 sur 20 des Search results" class="gcds-pagination-end-button" href="javascript:void(0)">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
Précédent
</a>
</li>
Expand Down Expand Up @@ -565,21 +565,21 @@ describe('gcds-pagination', () => {
<li>
<a aria-label="Page suivante: Page 11 sur 20 des Search results" class="gcds-pagination-end-button" href="javascript:void(0)">
Suivante
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
<ul class="gcds-pagination-list-mobile-prevnext">
<li>
<a aria-label="Page précédente: Page 9 sur 20 des Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)">
<gcds-icon margin-right="150" name="arrow-left"></gcds-icon>
<gcds-icon margin-right="150" name="chevron-left"></gcds-icon>
Préc.
</a>
</li>
<li>
<a aria-label="Page suivante: Page 11 sur 20 des Search results" class="gcds-pagination-end-button-mobile" href="javascript:void(0)">
Suivante
<gcds-icon margin-left="150" name="arrow-right"></gcds-icon>
<gcds-icon margin-left="150" name="chevron-right"></gcds-icon>
</a>
</li>
</ul>
Expand Down

0 comments on commit c98114f

Please sign in to comment.