Create Overview Page for Utilities

[sarinapadilla]

Out of conversations about updating our Utilities pages to use our own content instead of pointing to USWDS, we determined a need for a "What are Utilities"/"How to Use Utilities" page.

We'll need developers, designers, and IAs to collaborate on this page. And we'll be yoinking most of the content from the USWDS Utilities page.

Some notes so far on what it should contain: How to use our utilities:

• Responsive modifiers
  • Source: https://designsystem.digital.gov/utilities/height-and-width/#responsive-variants-2
    • Do not copy "Utility variable" table
• state variants
  • Source: https://designsystem.digital.gov/utilities/height-and-width/#state-variants-2
    • Do not copy "Utility-variable" table
• How to turn on the utility classes
  • Source: https://designsystem.digital.gov/utilities/#utilities-package-modules-and-settings-2
  • turning on every utility vs only turning on specific utilities - see comment
• Utility_classes_vs_mixins - Don't write this for this ticket
• How to use the utilities and mixins to make components - Don't include in this ticket
• Why size matters - Don't include in this ticket * Master list of utilities
  • Source: Generate from JSON
  • Remove Class Base column

Tasks

• [ ] Determine page location within site structure
• [ ] Create content in the shared word doc:
• [ ] Review content in shared document
• [ ] Create images (if needed) in shared folder:
  • [ ] Convert content and images to markdown
• [ ] Add to documentation site

Resources

• Mural with utilities pages template
  • The needs for this ticket are on the one yellow sticky outside of the page content section

[dcvijanovic1k]

Most recent comp has been updated to this Mural: https://app.mural.co/t/publicissapient7269/m/publicissapient7269/1708713324713/8c29da52a2d2584c52555e5439d99047355482e2?sender=uc0870c1f8489401535da0005; awaiting content for any further updates on design side.

[monika-jaeger]

Updates to comps are here in Figma. Updated header and side nav to correct navigation and updated noted headers to H2s. Awaiting further input for content.

cc: @blilianyu @laurelthrash

[laurelthrash]

Will review content - on hold until confirmed.

[olitharp-nci]

@use 'uswds-core';
uswds-core.$output-these-utilities: (
    'padding',
    'box-shadow',
    'font',
    'background-color',
    'font-weight',
    'border-color',
    'line-height',
    'justify-content'
);
// Add aspect ALWAYS outputs no matter the settings. So let's make sure we get
// the smallest possible aspect classes.
uswds-core.$add-aspect-settings: (
    output: false,
    responsive: false,
    active: false,
    focus: false,
    hover: false,
    visited: false
);
uswds-core.$background-color-settings: (
    output: true,
    responsive: false,
    active: false,
    focus: false,
    hover: false,
    // Undo default
    visited: false
);
uswds-core.$box-shadow-settings: (
    output: true,
    responsive: false,
    active: false,
    focus: false,
    hover: false,
    // Undo default
    visited: false
);
uswds-core.$border-color-settings: (
    output: true,
    responsive: false,
    // Undo default
    active: false,
    focus: false,
    hover: false,
    // Undo default
    visited: false
);
uswds-core.$justify-content-settings: (
    output: true,
    responsive: true,
    // Undo default
    active: false,
    focus: false,
    hover: false,
    visited: false
);

@forward 'uswds-utilities';

[laurelthrash]

Work on this ticket complete from design side for the time being. Closing this out on the Design board.

[andyvanavery31]

The utility module table will be a react component that is included in the MDX that reads from the utilities-modules.json.

Approach: TBD