Customize Docusaurus settings

Created by: 5h1rU

Details

Points below are all the topics needed as sections and their respective subsections. This checklist would be used also as our guide per component to determine when the docs are complete.

Sections

• Home page: This is the main page with general information about WCL. (Optional).

• Contribution Guidelines: All the information regarding how to add/edit or propose new ideas for the docs.

• Design Principles (handbook): This section will explain all the details about visual design best practices, constraints, and conventions.

• Typography: All the information about fonts and text guidelines will be gathered in this section.

• Colors: This section will show the color list used in WCL.

  • Light theme colors
  • Dark theme colors

• Components: Each component should be appropriately documented with:

  • Title: The component name (e.g., Input)
  • Description: A narrative explaining the component purpose. The "What" about the component.
  • External sources: Sourcegraph search link and GitHub file link
  • Implementation (The "How"): A technical example showing how to use the component. If the component has variants, explain each variant and display the component below each explanation.
    • Interactive preview: The component used in a real case scenario as an example.
    • Figma showcase: An iframe displaying the Figma component.
    • Props: A list of properties allowed by the component showing each field, including name, description, and type.
  • Connected components: Components that are using the sub-component or similar components that may be used/considered instead of the described component (ex. In navbar tabs, we should link other types of tabs navigation, so there is a clear picture of the alternatives)
  • Usage do’s and don’ts: optional but may be helpful in some cases