feat: pagination link component (resolves #10)

[chosww]

See #10 for details.

[netlify]

✅ Deploy Preview for idg-ds ready!

Name	Link
🔨 Latest commit	9bf74b7
🔍 Latest deploy log	https://app.netlify.com/sites/idg-ds/deploys/64bfdbcc4d69310008515bd8
😎 Deploy Preview	https://deploy-preview-29--idg-ds.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[greatislander]

A couple changes to the gradient. Also, this still needs focus and active states!

[greatislander]

A couple changes to the gradient. Also, this still needs focus and active states!

[chosww]

A couple changes to the gradient. Also, this still needs focus and active states!

Thanks for your review! I got the gradient values from Figma, so I assumed that would be correct. I forgot about the focus and active styles, I will add them now.

[greatislander]

A couple changes to the gradient. Also, this still needs focus and active states!

Thanks for your review! I got the gradient values from Figma, so I assumed that would be correct. I forgot about the focus and active styles, I will add them now.

We were both right with respect to the colours— the gradients actually go to color-blue-100, not white. I converted the RGB to HSL and it matched. Can you make that change?

[greatislander]

One issue with the focus state is that the focus ring as shown in the design should be inside the box and not outside.

You can see an example of how to address this using box-shadow on my draft PR for navigation:

https://github.com/inclusive-design/idg-design-system/blob/feat/navigation/src/static/css/_navigation.css#L19

idg-design-system/src/static/css/_navigation.css

Line 89 in 0479bcf

box-shadow: 0 0 0 0.375rem var(--fl-linkColor, var(--nav-item-border)) inset;

Since you won't be using the outline for focus styles, you can set its colour to transparent.

[greatislander]

One other note— even in the default state I think the top border and color should use --fl-linkColor to show that it's an interactive element.

[chosww]

One issue with the focus state is that the focus ring as shown in the design should be inside the box and not outside.

You can see an example of how to address this using box-shadow on my draft PR for navigation:

https://github.com/inclusive-design/idg-design-system/blob/feat/navigation/src/static/css/_navigation.css#L19

idg-design-system/src/static/css/_navigation.css

Line 89 in 0479bcf

box-shadow: 0 0 0 0.375rem var(--fl-linkColor, var(--nav-item-border)) inset;

Since you won't be using the outline for focus styles, you can set its colour to transparent.

Thanks for your feedback! I set outline to "none" instead, since we don't use it, but if you think setting it to transparent is more appropriate, I will change it to transparent. Also, I added align-items center to the pagination class, because I noticed that the text in the button is not vertically centered.

[greatislander]

Thanks for your feedback! I set outline to "none" instead, since we don't use it, but if you think setting it to transparent is more appropriate, I will change it to transparent. Also, I added align-items center to the pagination class, because I noticed that the text in the button is not vertically centered.

The reason for the outline rule is described in the link below— and actually you should follow the syntax shown here (outline: 3px solid transparent;): https://sarahmhigley.com/writing/whcm-quick-tips/#1.-custom-focus-styles-%2B-a-transparent-outline

[chosww]

Thanks for your feedback! I set outline to "none" instead, since we don't use it, but if you think setting it to transparent is more appropriate, I will change it to transparent. Also, I added align-items center to the pagination class, because I noticed that the text in the button is not vertically centered.

The reason for the outline rule is described in the link below— and actually you should follow the syntax shown here (outline: 3px solid transparent;): https://sarahmhigley.com/writing/whcm-quick-tips/#1.-custom-focus-styles-%2B-a-transparent-outline

Thanks for your explanation and the link!

[greatislander]

@chosww You need to use the same approach for both the default style and the focus style— box-shadow. Right now this happens (notice the jump of the top border):

focus.mp4

You can see this on my navigation PR. You may also want to explore the box-shadow syntax on MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow

[greatislander]

Final change: the pagination link should not be underlined, so you'll need to add a CSS rule to remove the underline.