USWDS-Site: Add component lifecycle pages #2491

amyleadem · 2024-02-14T14:07:01Z

Summary

Added a component status page.
Added a component lifecycle overview page
Updated the contribute page

Todo

Update changelog dates
Add missing links to uswds-proposals
Add missing links to discussion board
Add more components to status table

Related issue

Closes #2461

Preview links

Testing and review

Confirm the copy is updated to match most recent docs
Confirm the copy makes sense
Confirm the code is up to standards
Confirm all links work

amyleadem · 2024-02-14T19:11:13Z

pages/about/contribute.md

-USWDS is committed to building a safe, welcoming, harassment-free culture for everyone. USWDS is a part of the Technology Transformation Services (TTS) within the General Services Administration (GSA) and we expect everyone to follow the GSA TTS Code of Conduct.
-
-We encourage you to read the [LICENSE](https://github.com/uswds/uswds/blob/develop/LICENSE.md) and its [README](https://github.com/uswds/uswds/blob/develop/README.md). If you want to read more about our open source policy or have questions, check out the [18F Open Source Policy GitHub repository](https://github.com/18f/open-source-policy) or send us an [email](mailto:uswds@gsa.gov).
+We encourage you to read the [LICENSE](https://github.com/uswds/uswds/blob/develop/LICENSE.md) and the [LICENSE’s README](https://github.com/uswds/uswds/blob/develop/README.md).


@sarah-sch The README link here seems to just point to the USWDS readme. The link is the same as what is currently on the site. Is this where it should point?

@amyleadem - Hm, I am not sure if there is another README specific to the license. We could point to the license section of the USWDS README, but it is not very extensive and just points people back to the License. @annepetersen and @thisisdano - any thoughts? If we get in a time crunch I think it is ok to publish as is and figure this out after the MC.

If there isn't a README specific to the license, we could just cut it.

sarah-sch

Approving and leaving some suggestions for your consideration, @amyleadem.

pages/about/contribute.md

sarah-sch · 2024-02-14T20:53:24Z

pages/about/contribute.md

-### Want to propose something else?
+## Want to contribute something else?
+If you’d like to contribute something else that doesn’t fall into any of the above, we’d still love to hear about it.
+Just [create an issue](https://github.com/uswds/uswds/issues/new/choose) or [create a discussion](https://github.com/uswds/uswds/discussions/new?category=component-proposals), and we can talk about it.


@amyleadem, do you think that from "create a discussion" we should link to https://github.com/uswds/uswds/discussions instead?

We could! Initially I was thinking of just pointing them to start a new discussion, but it might be more informative your way. What do you think?

_data/lifecycle-status.yml

mejiaj

PR description

Changed the two !IMPORTANT notes as checklist items. Mainly to make it more scannable and show that there's additional work to be done.

PR review

Looks good visually and no A11Y issues found.

Added comments for improvements. Comments labelled as Future enhancement are meant as a follow-up. Mainly to improve maintainability, reduce code duplication, and moving data closer to where it lives.

_data/changelogs/about-contribute.yml

mejiaj · 2024-02-14T20:31:24Z

_data/nav.yml

@@ -162,7 +162,8 @@ About:
  - href: /about/
  - href: /about/key-benefits/
  - href: /about/product-values/
-  - href: /about/contribute/
+  - text: Contribute
+    href: /about/contribute/


Wouldn't the title in about/contribute.md be a better place for this?

uswds-site/pages/about/contribute.md

Line 2 in 341422c

title: Contribute to USWDS

I created this so that the sidenav link could stay as "Contribute". But it might not be necessary! Happy to remove if we are ok with the sidenav saying "Contribute to USWDS"

@amyleadem I see, I wasn't aware we wanted to keep the page title as Contribute to USWDS. I was suggesting changing the title because it'd be consistent everywhere.

In that case, we can ignore this.

pages/ui-components/lifecycle.md

mejiaj · 2024-02-14T21:03:07Z

css/_uswds-theme-custom-styles.scss

+}
+
+.usa-prose > .lifecycle-table {
+  @include u-font("lang", "3xs");


Future enhancement

This is pretty small, but it looks like other tables share small font size too.

Ex: /utilities/.

mejiaj · 2024-02-14T21:17:58Z

_data/lifecycle-phases.yml

Future enhancement

Consider either:

Moving this to frontmatter. This data is only used on the phases page.

Moving to markdown to make it easier for others to update/maintain.

mejiaj · 2024-02-14T21:22:01Z

_data/lifecycle-status.yml

Future enhancement

Consider splitting this data to make it easier to manage. Ex: Consider component frontmatter.

Improve clarity in relationship between status_major and status_minor.

Are both required?

What does one have to do with the other?

What are all of the possible states?

Use relative URLs for component pages

Toying around with the table classes, it looks like we might be able to consolidate these into one status and still be able to appropriately assign classes.

~~I removed the item.status_major checks that don't directly affect classes and didn't notice any visual regressions in the lifecycle table~~

Scratch that, I inspected desktop instead of mobile styles. I still suspect we can handle this with a single status but more testing required

We should look at how the data structure relates to the table structure (or the element it feeds). For example, is it set up in a way that makes templating intuitive. If one relies on the other, but they're siblings should we convert to something else on data-side?

That could not only help us improve the data, but also how we create the template elements.

mejiaj · 2024-02-14T21:22:53Z

css/_uswds-theme-custom-styles.scss

Future enhancement

Move to own partial for easier maintenance.

mejiaj · 2024-02-14T21:27:36Z

pages/ui-components/lifecycle-status.md

Future enhancement

Separate in to partial

Explore ways to improve setting status_classes. Ex: repetition on lines 19-23, 48-69, 100-120.

Co-authored-by: James Mejia <james.mejia@gsa.gov>

mahoneycm · 2024-02-14T22:51:45Z

pages/ui-components/lifecycle-status.md

Future enhancement

I'd love to see how it'd be possible to manage one table instead of two.

One thing I think we could do is use a combination of media queries and column-based class styles applied to td's to set display: none. I briefly looked into and but I don't think it'll affect display correctly.

Might be tedious but we could add a collapsable-column class to the columns we want to hide and set styles accordingly. Maybe I should submit a component variant proposal... 🤔

…mponent-lifecycle-pages

amyleadem · 2024-02-15T16:44:14Z

_data/lifecycle-phases.yml

+        find_more: |
+          All experimental components are documented on our <a href="https://designsystem.digital.gov/components/overview/">components page</a>.


@thisisdano @annepetersen Wondering if I should remove this until we have experimental components available. For now, we could just delete it. But in the future I could probably find a way to do a check to see if we have any experimental components in the status data before showing.

Suggested change

find_more: |

All experimental components are documented on our <a href="https://designsystem.digital.gov/components/overview/">components page</a>.

I'm tending more towards saying "In the future, all experimental components will be documented...", personally.

Updated the text to match your suggestion in 0610be8

thisisdano

NICE.

Addressed issues or moved into new issues

thisisdano · 2024-02-15T17:21:51Z

Merging over pa11y crashes

amyleadem added 30 commits January 22, 2024 14:22

Add component status page

ce45d17

Run prettier

8a88a1d

Clean up status page code; add proto data

739b579

Add option to add classes to icon.html

01922e9

Update status colors

06b7caa

Update mobile table styles

a12c2c7

First pass at lifecycle phases page

d73d83a

Lifecycle phases take 2

a199cd0

Update actual status data

ae636ae

Update colors on status page; Add to sidenav

192689a

Add content to phases page

f4d65e1

Fix component status permalink

37ef3d7

Use expected component data on status page

ed0743f

Add feature request components to status list

846195e

Add existing components to component-status.yml

b9c22c8

Make status table an include

85aafaa

Update styles: lifecycle table and colors

c65989c

Move component lifecycle phases page; Add gating

e78657b

Rename component-status --> lifecycle-status

e0ae530

Add changelogs

744e0d0

Create data for phases; update phase colors

d621474

Update lifecycle phase content

ffdb3c7

Update design and content for phases/status pages

b004400

Update content and styles on phases/status pages

0c4d666

Update phase lead and intro

bff8b25

Update intro on status page

4466fd5

Update phase info

0aee60e

Update phase data; Add find_more content to template

4baa145

Update phase data; include starts when/ends when

5a37a1c

Update phase content and structure

5dcaa56

Fix link formatting

31f6bab

amyleadem commented Feb 14, 2024

View reviewed changes

Update links and format contribute page

74db310

amyleadem marked this pull request as ready for review February 14, 2024 19:19

amyleadem requested review from mejiaj, mahoneycm and finekatie February 14, 2024 19:20

Revert public domain link to fix htmlproofer error

341422c

sarah-sch approved these changes Feb 14, 2024

View reviewed changes

mejiaj previously requested changes Feb 14, 2024

View reviewed changes

amyleadem and others added 2 commits February 14, 2024 14:45

Update _data/changelogs/about-contribute.yml

a35065b

Co-authored-by: James Mejia <james.mejia@gsa.gov>

Add links to discussion filters

6d1aeee

mahoneycm reviewed Feb 14, 2024

View reviewed changes

amyleadem and others added 8 commits February 14, 2024 16:32

Add link to tabs component discussion

bfa3801

Add link to proposal template

0cf069b

Add links to cui banner, quote discussions

7cf16e5

Merge branch 'main' of https://github.com/uswds/uswds-site into al-co…

8af8c81

…mponent-lifecycle-pages

Update changelog dates for 2491

af96549

Add new discussions to status table

f4ba954

Fix broken link code on phase page

87f49c3

Point discussion links inside component discussion

aa22239

amyleadem commented Feb 15, 2024

View reviewed changes

Update copy for experimental components link

0610be8

annepetersen approved these changes Feb 15, 2024

View reviewed changes

thisisdano approved these changes Feb 15, 2024

View reviewed changes

thisisdano merged commit e70aad5 into main Feb 15, 2024
9 of 11 checks passed

thisisdano deleted the al-component-lifecycle-pages branch February 15, 2024 17:22

amyleadem mentioned this pull request Feb 23, 2024

USWDS-Site - Component lifecycle: Update contribution page #2150

Closed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

USWDS-Site: Add component lifecycle pages #2491

USWDS-Site: Add component lifecycle pages #2491

amyleadem commented Feb 14, 2024 •

edited

Loading

amyleadem Feb 14, 2024 •

edited

Loading

sarah-sch Feb 14, 2024

annepetersen Feb 15, 2024

sarah-sch left a comment

sarah-sch Feb 14, 2024

amyleadem Feb 15, 2024 •

edited

Loading

mejiaj left a comment •

edited

Loading

mejiaj Feb 14, 2024

amyleadem Feb 14, 2024

mejiaj Feb 14, 2024 •

edited

Loading

mejiaj Feb 14, 2024 •

edited

Loading

mejiaj Feb 14, 2024

mejiaj Feb 14, 2024

mahoneycm Feb 14, 2024 •

edited

Loading

mejiaj Feb 15, 2024

mejiaj Feb 14, 2024

mejiaj Feb 14, 2024

mahoneycm Feb 14, 2024

amyleadem Feb 15, 2024

annepetersen Feb 15, 2024

amyleadem Feb 15, 2024 •

edited

Loading

thisisdano left a comment

thisisdano commented Feb 15, 2024

		find_more: \|
		All experimental components are documented on our <a href="https://designsystem.digital.gov/components/overview/">components page</a>.

USWDS-Site: Add component lifecycle pages #2491

USWDS-Site: Add component lifecycle pages #2491

Conversation

amyleadem commented Feb 14, 2024 • edited Loading

Summary

Todo

Related issue

Preview links

Testing and review

amyleadem Feb 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

sarah-sch left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amyleadem Feb 15, 2024 • edited Loading

Choose a reason for hiding this comment

mejiaj left a comment • edited Loading

Choose a reason for hiding this comment

PR description

PR review

Choose a reason for hiding this comment

Choose a reason for hiding this comment

mejiaj Feb 14, 2024 • edited Loading

Choose a reason for hiding this comment

mejiaj Feb 14, 2024 • edited Loading

Choose a reason for hiding this comment

Future enhancement

Choose a reason for hiding this comment

Future enhancement

Choose a reason for hiding this comment

Future enhancement

mahoneycm Feb 14, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Future enhancement

Choose a reason for hiding this comment

Future enhancement

Choose a reason for hiding this comment

Future enhancement

Choose a reason for hiding this comment

Choose a reason for hiding this comment

amyleadem Feb 15, 2024 • edited Loading

Choose a reason for hiding this comment

thisisdano left a comment

Choose a reason for hiding this comment

thisisdano commented Feb 15, 2024

amyleadem commented Feb 14, 2024 •

edited

Loading

amyleadem Feb 14, 2024 •

edited

Loading

amyleadem Feb 15, 2024 •

edited

Loading

mejiaj left a comment •

edited

Loading

mejiaj Feb 14, 2024 •

edited

Loading

mejiaj Feb 14, 2024 •

edited

Loading

mahoneycm Feb 14, 2024 •

edited

Loading

amyleadem Feb 15, 2024 •

edited

Loading