Update documentation site Border page content to use Utility page template

[sarinapadilla]

Request Description

This change request is update the Border page on the NCIDS from only having basic information about border tokens to using our Utility page template.

• [ ] IA/development/design updates to the Border doc site page with all content needed using the new utility page template (created in #1593)
• [ ] Design updates to the community Figma
• [ ] Developer updates to the code to adopt the border utilities within the NCIDS

What's the expected change?

• The doc site is updated to show users how to fully use border utilities/tokens without pointing to USWDS
• The community Figma file will be updated to include the border utilities/tokens
• The NCIDS code will be updated to fully adopt the border utilities/tokens

What's the current functionality?

• The doc site directs users to USWDS Border utility page

Related Tickets

• Prerequisite: #1593
• Original story: #1199
• Related story: #1327

[dlescarbeau]

Approach: My thought here is that we should create two new display table components.

One will display a required class name, and display an optional value, an optional example, or both. This would be used for border, border-radius, and border-width tables, similar to USWDS.

• Additionally, these tokens should be broken up into groups similar to our updated color foundations page.
• (I could maybe see us abstracting the TextDemonstration table component to just display a class name, value, and example and using that here, but that'd likely be more trouble than just creating another table display component in the factory).

The other will display color chips preceding the displayed class name as examples of the border colors, as well as an optional color value (like gray-5) and required hex value. This would be used for the border color table, showing an example color chip as well as the color value and hex value of the token. Once again, can reference USWDS for look and feel of the table columns.

[bryanpizzillo]

@dlescarbeau can you please add a note of which utility modules should be added to this page, and which table would be used. Like, be VERY clear about what you are going to do here. e.g., "I could maybe see us abstracting the TextDemonstration table component" is not telling me what you want for that. Also for the "tables" please provide example json.

P.S. Please do not update TextDemonstration to not do something that is not text. Maybe it could share with margin and padding though?

[dlescarbeau]

Tasks:

• [ ] Create a BoxModelDisplayTable component. The component will display groups of classes:
  • NOTE: We want to use this for Height and Width.
  • Column 1 - Class Name
    • from yaml: class_name
    • Follow USWDS -- class="usa-grid-col utility-example-class"
  • Column 2 - Calculated Value
    • from yaml: calculated_value
    • follow USWDS -- class="usa-grid-col utility-example-value"
  • Column 3 (or 2) - Example
    • An example of the border, IE a box with the border being displayed (see USWDS Border)
    • Follow USWDS -- class="usa-grid-col utility-example"
    • this should output a div with a set of classes to display the box model settings for the class
• [x] Update a ColorDemonstration component.
  • TODO:
    • [x] Copy the existing ColorDemonstration.jsx to TextColorDemonstration.jsx.
    • [x] Update the Color utility mdx page to change the text-color utility module to use TextColorDemonstration.
    • [x] Update ColorDemonstration.jsx to take a "example_type" parameter, which will default to color_chip
      • There should be a switch statement in drawRow to call the correct "component" to output this example.
      • The color_chip should display as it does on the Color utility page, for the bg color.
      • Remove the const backgroundColor = utilityClass.class_name?.includes('bg') || false; stuff.
    • [x] Add a new type for background_color to output 2 divs like USWDS does.
    • NOTE: We will add "outline" as a type for the outline page.
  • This component should be built so that it can be used for outline. So you will need to pass in border as a utility_module_display_params.additional_example_classes class.
  • The columns will end up being:
    • Column 1 - Class name
      • This should output the "example_type" display (e.g., a color chip or two boxes to highlight the background) along with the class name. See USWDS.
    • Column 2 - Hexadecimal Value
      • Color example with hex value, just like the color examples of the color docs page. (We may want to consider this color example with the color and hex value as a re-useable component to be shared amongst these display tables with colors? Something for us to consider but otherwise this is just an example of the color with the hex value next to it.)
      • likely fits better in grid-col-2
• [ ] Add border, border-radius, border-color, border-style, and border-width utilities from utility-modules.json
  • BoxModelDisplayTable
    • border
      • utility_module_display_params.additional_example_classes should include square-8 and bg-base-lightest
    • border-radius
      • utility_module_display_params.additional_example_classes should include height-8, width-15 and bg-secondary-light
    • border-style
      • utility_module_display_params.additional_example_classes should include square-8, bg-base-lightest, and border
      • NOTE: Do not include .border in the class name
      • We should have an intro here that notes that the border style only applies when the border class has been applied to the element
    • border-width
      • utility_module_display_params.additional_example_classes should include border, square-8 and bg-base-lightest
      • We should have an intro here that notes that the border width only applies to the visible borders when using the Border utility classes.
  • border-color will use the BorderColorDisplayTable

[bryanpizzillo]

This ticket should come before Height/Width, Circle, Outline.