NCIDS For All Pilot - Components

[sarinapadilla]

As anyone who uses NCIDS For All, I want to see and navigate through all available components in NCIDS, so that I can create and execute the design for my pages.

This will involve creating a comp for the display of the components needed for the pilot. Include both the overview page and the individual component pages.

Tasks:

• [x] Create comp that represents consistent styling across component pages
  • [x] Review with UX
  • [x] Review with dev
  • [x] Update comp and align internally
  • [x] Create a standard template to be implemented for all component pages
  • [x] Make determination regarding "Anatomy" section (heading and image) and update comp accordingly
  • [x] Outstanding question: remove "Patterns" from the site map and add to the specific component (for design/developer discussion week of 08/21) [tracked in #993]
  • [x] Obtain developer confirmation for variation FigJam (dev feedback obtained 08/18, with @monika-jaeger @adrianacastaneda for updates on hold as of 08/20 to account for variation review - tracking this as part of #1140 as the FigJam does not impact the individual component page mock up)
  • [x] Confirm "Anatomy" decision (change to "Overview") with developers (sent via Slack for review 08/17)
  • [x] Pass to development for next steps
• [ ] Related tickets that integrate with this ticket:
  • [x] #938
  • [x] #944
  • [x] Cross-linking to pattern pages: #993

Resources:

• Let's not make it look like this: https://designsystem.digital.gov/components/overview/
• Variation FigJam: https://www.figma.com/file/mLlEkBBiU4bCjZqcgj2ewh/Component-Variations-Audit?type=whiteboard&node-id=0%3A1&t=qRxwPJX14HP1aGVW-1
• Component Figma: https://www.figma.com/file/8qu1psEjnehVDoZyWrH7ny/NCI-DS-For-All?type=design&node-id=0%3A1&mode=design&t=gnIwhwi6D18MTuME-1

[monika-jaeger]

Compiling the comp here: Figma Link

[laurelthrash]

Notes from 7/13 UX internal meeting:

• @monika-jaeger walked through preliminary Figma comp for components
• "Find a Component" combo box is not a high priority for pilot
• Global search included in the comp as desired functionality, but will need to determine LOE and prioritize this
• Do we want to consider an On This Page (OTP) later on? Not crucial for launch.

Tasks

• [x] Provide updated footer links for doc site @adrianacastaneda @lburack

Next steps: Monika send links around to team for feedback through Tues. 7/18 for review with larger team during internal meeting 7/19. Cc: @monika-jaeger @sarinapadilla

[laurelthrash]

Slated for internal discussion during 7/19 requirements meeting Cc: @monika-jaeger

[laurelthrash]

Notes from internal discussion during 7/19 requirements meeting:

• Decisions added as replies in the Figjam

Next steps for UX (also tracked in Figjam) @monika-jaeger @adrianacastaneda

• [x] Variations:
  • [x] Take inventory of all variations of all components
  • Work with developers to confirm full list has been captured, investigate parent and child structure with the guidance relating to each to determine best strategy, and determine next step with variations
  • Note: reference or create new tickets for the actual written guidance based on variations
• [x] Footer Links: provide updated footer links for doc site (outstanding from previous 7/13 comment) @adrianacastaneda @lburack
• [x] Code Snippets: (complete with updates based on 8/2 meeting)
  • [x] Developers to share what sections they want to see in the Code Snippets section
  • [x] Update Code Snippets section accordingly
• [x] Code Snippets: Redesign "Copy code" button (reference: need reference from developers)
• [x] Maintaining images (e.g., Anatomy section, component thumbnail) (Question: will this look nice in the comp but will make for more overhead later on?)
  • [x] Pilot: remove images from Components Overview page
  • Pilot: Individual component page: will have Anatomy, Behaviors - either via live HTML or images (track in inventory)
  • Later: Determine if we will we ever adopt images on the Components Overview page

Next Steps: 1) Make above determinations and changes to the comps 2) approve/align internally 3) show Anna for green light 4) pass to development

[monika-jaeger]

Initial audit of all component variations here. cc @adrianacastaneda @laurelthrash

[laurelthrash]

Comments that came out of #1082 that we want to capture in this ticket: @monika-jaeger @blilianyu

Issues identified on current documentation site:

• For “Outline Secondary Button”, the “unstyled button” shouldn’t have the outline and should be the same as the other unstyled button variants.
• For “Copy Code” section, can we make it all consistent with the black background?
• Should “Character Count” and “Memorable Date” be listed under “USWDS Components”? Or are we customizing those?
• "Character Count" - 404

[lburack]

Suggested footer links:

About

• About NCIDS
• Design Principles

Resources (option 1)

• Getting Started
• Foundations
• Components

Resources (option 2)

• For Designers
• For Developers
• Foundations
• Components

Policies [keep same links]

• Accessibility
• FOIA
• Privacy & Security
• Disclaimers
• Vulnerability Disclosure

@adrianacastaneda - any strong preference between option 1 and 2 for Resources? Most other design systems don't seem to have footer links; or if they do, they aren't related to the DS (footer links for the company or org instead). The footer links can feel redundant of the main navigation.

[laurelthrash]

Notes from 8/2 Requirements Meeting // Next steps: @monika-jaeger update comp based on below updates. @arcepaul build this out on the documentation site.

Variations

• [x] Remove minus symbol at top of the buttons page for Variants (internal note: this will be a code block)

Code Snippet

• [x] Make page look like top comp
• [x] Remove the minus symbol on right side by the component preview
• [x] Add "Show More" for the code preview (reference Atlassian example)
• Future: talk about how to collapse sections of pages (if it is a section that should collapse)

Cc: @bennettcc @sarinapadilla @andyvanavery

[monika-jaeger]

Updated comps for the Individual Component Page is here. cc @laurelthrash @blilianyu

[laurelthrash]

@monika-jaeger shared updated version with designers via Slack on 08/07. Next steps: designers to review, then send to developers for review. On track to show at end of sprint on 08/08.

[laurelthrash]

@monika-jaeger updated based on designer input. Shared with developers on 08/07 for feedback.

[laurelthrash]

Questions that came up during demo from end of sprint (answers below)

• Will we include storybook on the component page?
• Does performance of the component preview change based on the screen size or is this a static image? (e.g., having a minimized window)?
  • Suggestion: Add "Desktop View" to the comp and build out to indicate what breakpoint the comp represents

[laurelthrash]

Changes to comp from 08/09 Requirements Meeting:

• [x] Remove storybook from component page
• [x] Link to the Storybook full page preview for components that are problematic (Requires to go through each component to determine which this includes. Header is an example of )
  • [x] Button will not mention Storybook, rather, says something like "Demo Basic Header"

Notes

• Storybook - will we include a link to Storybook on components?
  • What is included in Storybook that cannot be delivered elsewhere?
  • We use Storybook for visual regressions.
  • Decision: for now, we do not see anything mission critical in Storybook that cannot be obtained through other resources, and by including Storybook link it would result in changing how we currently use Storybook as well as add additional maintenance in the future
• Performance on smaller screen sizes (use case: using a split screen while working)
  • USWDS is not responsive
• Code preview color - adopts theme that is not consistent with our colors
• OTP table of contents - agree this is out of scope for the pilot, but may want to consider in the future. Anchor links satisfies Anna's initial want/desire.

[monika-jaeger]

@laurelthrash

• Removed 'storybook' button from Buttons and Guide Card pages.
• Added 'Demo' button to Guide Card page. cc @blilianyu

[laurelthrash]

@adrianacastaneda @blilianyu @monika-jaeger Discussion during 08/17 UX meeting regarding the "Anatomy" section:

Decision:

• [x] Change "Anatomy" to "Overview"
• [x] Use static image below "Overview" with numbers that notes the different attributes (e.g., Dell)
  • Overview section will include static image and labels associated with the numbered attributes
  • Clearly note which variant is displayed under "Overview" and point to the variant section
  • Use most robust variation of the component (e.g., hero with tagline, primary CTA button, and CTA strip)
  • Note: do not believe the basic attributes of the components will change regularly enough - but want to discuss further
• [x] Change "Best Practice" to "Usage" - include text currently under "Anatomy" to this section
• [x] Change "Content Guidance" to "Best Practices"

Next Steps:

• [x] Update comp @monika-jaeger
• [x] Share with Paul A./developers to verify no concerns (shared via Slack 08/17)
• [x] Determine how to track static images needed for site @laurelthrash (Laurel to pull this out of this ticket)

[laurelthrash]

Confirmed during standup 08/24 that the comp is finalized, and includes the "Anatomy" (changed to "Overview"). Documentation tracked in #1117. Closing this ticket from the Design side due to the above. Cc: @monika-jaeger @adrianacastaneda @bennettcc

[bennettcc]

Closing this as complete - the component landing page is being tracked here: https://github.com/NCIOCPL/ncids/issues/1221