feat (#71): component status view and documentation updates by twjeffery · Pull Request #337 · GovAlta/ui-components-docs

twjeffery · 2025-04-07T23:08:04Z

Summary

update to the all-component-page to show list view
update to all component documentation pages (split examples into a new tab, links to figma and github, update to page header)
added sandbox header component to add copy link to clipboard and a link to Figma for relevant examples
added new design tokens to tokens documentation pages
other small cleanup:
- adjusted external link icon size
- updated some examples to align with design
- updated broken links in footer

Issues completed:

This also fixes these issues:

Added list view of all components:

Adds a second view to the component page to show a table/list that includes status.
card image now also links to component page
status badges added to component cards as well as list (hidden on cards if component status=published)
list view allows sorting
list view links to github issues in our ds backlog that are tagged with the component name
displays "View([count of issues in github])

Split component documentation into tabs:

breaks the component examples for each component onto it's own tab, and adds placeholder content for when no examples, design, and accessibility that links to a relevant place.
component property inputs (controls) into an accordion that's open by default so a user can collapse when needed
component properties now on the page outside of an accordion
component property "default" on separate line for better visibility when scanning
added links to Github issues (tagged as this component) and links to Figma page in component library (the relevant component) in component page header

Added sandboxHeader component to all code examples:

added copy link and link to Figma (when available) to component examples heading. Component made in code for this: sandboxHeader.tsx
component takes a ExampleTitle and an optional link to a Figma example

Added new design tokens to tokens documentation pages

update to add all missing tokens to doc pages, formatting fixes, and main navigation label change
broke the colour design tokens into separate tables for a better responsive design
added all new published tokens to token documentation pages
changed name in main nav from Styles to Tokens, updated name throughout documentation
updated styling of Get support in main nav
other small content changes

Figma design for reference

netlify · 2025-04-07T23:09:23Z

✅ Deploy Preview for abgov-ui-component-docs ready!

Name	Link
🔨 Latest commit	`3b5b361`
🔍 Latest deploy log	https://app.netlify.com/sites/abgov-ui-component-docs/deploys/680bef86f1a4b3000859ffd2
😎 Deploy Preview	https://deploy-preview-337--abgov-ui-component-docs.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.

Spark450 · 2025-04-09T16:40:18Z

@twjeffery Just a few things I noticed when looking at the deploy preview:

List view of all components
Images seem to be missing for:
-Notification banner
-Skeleton loader

Issue count
-Open issue count seems to be missing on table view of all components
-GitHub issue count seem to be missing on the "GitHub issues" link in the component tombstone area

twjeffery · 2025-04-09T16:53:39Z

@twjeffery Just a few things I noticed when looking at the deploy preview:

List view of all components Images seem to be missing for: -Notification banner -Skeleton loader

Issue count -Open issue count seems to be missing on table view of all components -GitHub issue count seem to be missing on the "GitHub issues" link in the component tombstone area

Thanks @Spark450

I updated to add those images, they are there now.

For the issue count: it was an access issue with the Github API, we needed to add our Github token. Chris just added it to Netlify so now the deploy preview works as expected. But when we deploy it to production we will need to store the Github token for use on our public site.

New story created for storing tokens: GovAlta/ui-components#2581

Update: I should be able to use the VITE_AUTH_TOKEN for Github authorization.

- https://github.com/GovAlta/ui-components-design/issues/71 - added list view of components in separate tab - updated images and image styling - reordered component side menu to sort under component categories - added badges to both views of components based on status

- updated token snippet design - added space on top for consistency on content side menu - broke the colour design tokens into separate tables for a better responsive design of the tables - added all new tokens to token documentation - changed name in main nav from Styles to Tokens - updated naming throughout documentation - changed styling of Get support in main nav - other small content changes

- update to all component documentation pages to split content into tabs - moved properties out of accordion into table - wrapped component properties in accordion, set to open on load - updated componentHeader to include link to Github, Figma, and styling update - moved code examples to their own tab - added links to design documentation in Figma on design tab - added links to accessibility documentation in Figma on accessibility tab

- added link to Figma and copy heading link to clipboard to all relevant examples - fixed external link icon size - updated some component examples to align with design

Spark450 · 2025-04-09T22:28:40Z

@twjeffery Just a few things I noticed when looking at the deploy preview:
List view of all components Images seem to be missing for: -Notification banner -Skeleton loader
Issue count -Open issue count seems to be missing on table view of all components -GitHub issue count seem to be missing on the "GitHub issues" link in the component tombstone area

Thanks @Spark450

I updated to add those images, they are there now.

For the issue count: it was an access issue with the Github API, we needed to add our Github token. Chris just added it to Netlify so now the deploy preview works as expected. But when we deploy it to production we will need to store the Github token for use on our public site.

New story created for storing tokens: GovAlta/ui-components#2581

@twjeffery Changes look great, thanks for creating that issue to make the issue count work in production.

bdfranck

Looking good! I found a couple minor issues and potential improvements. I'll switch to testing for now since a more experienced dev can give better specific feedback.

bdfranck · 2025-04-11T19:36:10Z

Test results

Components side menu

✅ I see all components are grouped by category.
✅ I can expand and shrink each category.
✅ I can navigate to "All components".
✅ I can navigate to a component page.
✅ I see the current page is highlighted.
✅ When I open a component page, I see the relevant category is expanded and the menu item is highlighted.

All Components: Card view

✅ I can see all component cards.
✅ I see the cards are ordered alphabetically.
✅ I can select a component image to open the component docs.
✅ When the component is published, I cannot see a status badge.
✅ When the component is in progress, I can see a badge labelled "In progress".
✅ When the component is not published, I can see a badge labelled "Not published".
✅ When the component is not published, I see a "Not yet available" placeholder image.
✅ When the component is in progress or not published, I see a link to view related issues in GitHub.
✅ When I select the "Issues" link, I see a list of issues in GitHub.
✅ All issue links navigate to the correct locations in GitHub.
✅ I can navigate the list by keyboard.

All Components: List view

✅ I can see all of the components in a list.
✅ The list is ordered alphabetically.
✅ I can sort by status ascending and descending.
✅ I can sort by name ascending and descending.
✅ I can sort by category ascending and descending.
✅ I can see a link for GitHub issues.
✅ When I select the "Issues" link, I see a list of issues in GitHub.
✅ I can navigate the list by keyboard.

Component page

✅ I can see links to Github and Figma in the header.
✅ When I select the Github link, I see a list of issues in GitHub.
✅ When I select the Figma link, I can see the designs in Figma.
✅ I can see tabs for code playground, examples, design, and accessibility.
✅ I can see the number of examples on the examples tab.
✅ I cannot see a tab for code playground if one does not exist.
✅ If there are no examples, I can see the empty state.
✅ I see a link to the Figma design on the Design tab.
✅ I see a link to the Figma design on the Accessibility tab.

Component examples

✅ I see a button for copying an example.
✅ I see a button for opening the example in Figma.
✅ I can see each example in the right-hand side nav.
✅ I can navigate to an example in the right-hand side nav.

Tokens pages

✅ I see the top nav label is "Tokens".
✅ I see the color tokens are grouped by category.

bdfranck · 2025-04-11T19:51:07Z

@twjeffery Looks good! I only notice one small accessibility issue during testing in Microsoft Edge v135.0.3179.54.

When navigating the cards by keyboard, it's hard to notice that the image link is in focus. I can only see the bottom border of the default focus outline.

You could address this issue in one of two ways:

Add focus styling to the image and titles in the component card.
Remove the images from the tab order by using the tabindex="-1" property. (Read more at MDN)

twjeffery · 2025-04-16T17:41:42Z

@twjeffery Looks good! I only notice one small accessibility issue during testing in Microsoft Edge v135.0.3179.54.

When navigating the cards by keyboard, it's hard to notice that the image link is in focus. I can only see the bottom border of the default focus outline.

You could address this issue in one of two ways:

Add focus styling to the image and titles in the component card.

Remove the images from the tab order by using the tabindex="-1" property. (Read more at MDN)

I updated the component card to only show a visual focus around the whole card. The Component name and the image remain clickable.

twjeffery · 2025-04-16T17:42:32Z

Thanks for the thorough review @bdfranck

I've pushed my changes, it's ready to review again

Copilot

Copilot reviewed 146 out of 155 changed files in this pull request and generated 2 comments.

Files not reviewed (9)

src/components/code-snippet/CodeSnippet.css: Language not supported
src/components/component-card/ComponentCard.css: Language not supported
src/components/component-header/ComponentHeader.css: Language not supported
src/components/icon-snippet/IconSnippet.css: Language not supported
src/components/sandbox/Sandbox.css: Language not supported
src/components/sandbox/sandbox-header/sandboxHeader.css: Language not supported
src/components/support-info/SupportInfo.css: Language not supported
src/components/table-of-contents/toc.module.css: Language not supported
src/components/token-snippet/TokenSnippet.css: Language not supported

Comments suppressed due to low confidence (1)

src/components/component-card/ComponentCard.tsx:32

If 'props.name' may change during the component's lifecycle, consider including it in the dependency array of the effect that validates the image URL to ensure the image updates accordingly.

const [imageUrl, setImageUrl] = useState(`/images/${dasherize(props.name)}.png`);

bdfranck · 2025-04-17T21:59:34Z

I can now see the card in focus when I navigate by keyboard. Looks good! 👍

bdfranck

All the issues that I mentioned in my previous review have been addressed. Looks good to me! 👍

bdfranck · 2025-04-17T22:10:15Z

I forgot to test the fixes for GovAlta/ui-components#2313 and GovAlta/ui-components#2313. I tested the AC on both:

✅ I cannot see the right-side TOC menu below the content when my screen width is less than 1153px

✅ I can see the chip component is named "Filter chip"

twjeffery marked this pull request as ready for review April 8, 2025 00:03

twjeffery marked this pull request as draft April 8, 2025 17:19

twjeffery force-pushed the TJ-71-component-statuses branch 2 times, most recently from ed7a686 to 246b5f0 Compare April 9, 2025 03:08

twjeffery marked this pull request as ready for review April 9, 2025 14:49

twjeffery changed the title ~~feat (#71): component status view and component doc page updates~~ feat (#71): component status view and documentation updates Apr 9, 2025

This was referenced Apr 9, 2025

feat(#71): add component status page #300

Closed

Component examples linked to design #316

Closed

feat(#20): update to component doc page #301

Closed

This was linked to issues Apr 9, 2025

Feedback and alerts on Docs site /components showing Chip, but Chip has been removed from the website GovAlta/ui-components#2373

Closed

Website Right Menu: Menu appearing below content GovAlta/ui-components#2313

Closed

twjeffery added 4 commits April 9, 2025 11:08

feat: add sandbox header component to all examples

579283f

- added link to Figma and copy heading link to clipboard to all relevant examples - fixed external link icon size - updated some component examples to align with design

twjeffery force-pushed the TJ-71-component-statuses branch from 246b5f0 to 579283f Compare April 9, 2025 17:09

twjeffery mentioned this pull request Apr 9, 2025

Store auth tokens for various APIs GovAlta/ui-components#2581

Open

bdfranck reviewed Apr 10, 2025

View reviewed changes

twjeffery mentioned this pull request Apr 11, 2025

Anchor links to anything within tabs is not working GovAlta/ui-components#2630

Closed

This was referenced Apr 14, 2025

BLOCKED feat(#2594): document link component #341

Closed

Document GoA "link" component GovAlta/ui-components#2594

Closed

twjeffery force-pushed the TJ-71-component-statuses branch from 1c3216d to 265e04b Compare April 16, 2025 17:38

twjeffery requested a review from bdfranck April 16, 2025 20:21

bdfranck requested a review from Copilot April 17, 2025 15:40

Copilot AI reviewed Apr 17, 2025

View reviewed changes

Comment thread src/components/empty-states/design-empty/DesignEmpty.tsx Outdated

Comment thread src/components/empty-states/accessibility-empty/AccessibilityEmpty.tsx Outdated

bdfranck approved these changes Apr 17, 2025

View reviewed changes

update from review comments

1b321d6

twjeffery force-pushed the TJ-71-component-statuses branch from 265e04b to 1b321d6 Compare April 21, 2025 16:57

Merge branch 'alpha' into TJ-71-component-statuses

3b5b361

chrisolsen merged commit 355498e into alpha Apr 25, 2025
7 checks passed

chrisolsen deleted the TJ-71-component-statuses branch April 25, 2025 20:33

Conversation

twjeffery commented Apr 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

Issues completed:

This also fixes these issues:

Added list view of all components:

Split component documentation into tabs:

Added sandboxHeader component to all code examples:

Added new design tokens to tokens documentation pages

Uh oh!

netlify Bot commented Apr 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for abgov-ui-component-docs ready!

Uh oh!

Spark450 commented Apr 9, 2025

Uh oh!

twjeffery commented Apr 9, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Spark450 commented Apr 9, 2025

Uh oh!

bdfranck left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

bdfranck commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Test results

Components side menu

All Components: Card view

All Components: List view

Component page

Component examples

Tokens pages

Uh oh!

bdfranck commented Apr 11, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

twjeffery commented Apr 16, 2025

Uh oh!

twjeffery commented Apr 16, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

bdfranck commented Apr 17, 2025

Uh oh!

bdfranck left a comment

Choose a reason for hiding this comment

Uh oh!

bdfranck commented Apr 17, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

twjeffery commented Apr 7, 2025 •

edited

Loading

netlify Bot commented Apr 7, 2025 •

edited

Loading

twjeffery commented Apr 9, 2025 •

edited

Loading

bdfranck commented Apr 11, 2025 •

edited

Loading

bdfranck commented Apr 11, 2025 •

edited

Loading