(Blocked until VA confirms CodeSandbox is usable) Playground documentation: TextField component

[nickjg231]

Within the /docs/reference/form-builder folder in the va-forms-system-core repo, create a file to document the <TextField> component. Documentation should be for our react component and its functionality. You do not need to include any documentation for the inner component-library element we use, however your documentation should still mention some of the common attributes/functions our react component uses that may come from that inner component-library element.

Your documentation can be structured similar to our VA Forms Library documentation. However, wherever you previously would have used a code snippet, you now have the option to create an interactive example using CodeSandbox, and embed that example inline. This allows us to explain some feature of our component in our documentation, show the underlying code to implement that feature, then show an interactive example that runs using that code (which users can also modify and see changes in real-time).

To create code snippets with CodeSandbox and embed an example, do the following:

1. Login to CodeSandbox and navigate to our VAFSC documentation sandbox
2. Under /src/pages, create a new react file that shows the feature you are documenting
3. In App.jsx, create a new route to your file, then navigate to that URL in the embedded browser on the right side of the screen. Make sure to save your changes
4. At the top, press Share, then Embed
5. Within the Embed modal:
   1. Click the hamburger menu to expand the Files pane
   2. Open any files you want to showcase and close the others from the code editor window
   3. Make sure the following options are selected on the left side:
      1. Select Editor + Preview at the top
      2. Advanced Options > Project Initial Path -- Enter the same URL for the route you created in App.jsx
      3. Change any other options if they are helpful for your example
   4. Click Copy Embed Code
6. Back in the VAFSC repo within your .md file, create a <div style="min-width=800px"></div> and paste your embedded code inside of the div

After this, when you run the Jekyll app, you should see the embedded CodeSandbox that shows both the code editor and the live preview window. Depending on how these behave on various screen sizes, we may need to increase the min-width of the surrounding div, as too small a width may only show the preview window without the code editor.

---

For the TextEditor documentation, add any documentation you feel is helpful (use that reference from the old docs). Make sure you document the following features as well:

• Default behavior
  • Using the component
  • Non-validation attributes, like name and label
  • Rendering the component with a provided initial value
• Validation / Error handling
  • Default required attribute (<TextEditor required>) shows default error
  • Custom required message (<TextEditor required=“Some error message”>) shows this custom error message instead of the default
  • Conditional required attribute (TextEditor required={someTruthyCondition}>) will only show error when the condition is true
  • Custom validation function (<TextEditor validation={someValidationFunc}>) checks the value against this truthy function

[taylorkaren]

Per standup discussion on 8/3/22, Micah is checking to see if CodeSandbox is approved for use on the platform. If not, we need to see what it would take to request approval.

[taylorkaren]

Sprint planning, 8/16/22: Micah needs to poke around and find out who to talk to about this.