The main objective of this document is offer the general process guidelines on how to create or modify components or addons in the Aqua library.

The created/modified component must respect and follows the colors, sizes, spacing, typography, iconography and other design rules established in the library, which can be referenced in the following files:

• Aqua design guidelines
• Example component design
• ***Example component documentation***

General Considerations

It's important to consider:

• Aqua doesn’t use the Vue Store, because it doesn’t implement or include any business or core logic.
• Aqua components are built as transversal components that can be used in all products with good performance and consistency, therefore all new components or modifications must respect this concept.

Creating a new component

Any new component created inside the Aqua library must take into account the following requirements:

• The project repository has to be allocated inside the MasivianFront azure account. The repository must be downloaded and updated from the develop branch.

• The team that creates the new component must create a new branch named after the component's name, e.g.:

  • if the component is called new component →

    *branch name: feature/newComponent, *****

<aside> ℹ️ In general, the branches naming should obey the following structure:

• For corrections must be bugfix/[mainCorrection],

• For refactor/improvement must be refactor/[mainChange],

• For new functionalities must be feature/[mainFunctionality]. </aside>

• The component naming and location must be comply the following rules:

  • The file name must be respect the ***UpperCamelCase convention,*** e.g.

    • component name: new component →

      file name: NewComponent

  • The component file must be placed according to the group/type to which it belongs, this is defined from its creation in design, like this src/components/[group/type]/[ComponentName.vue]. e.g.:

    • Assuming group/type ‘forms’, the component location must be: src/components/forms/NewComponent.vue

  • The internal component naming must respect the convention used for Aqua components, including the prefix aq-, e.g.:

    • Component name: 'aq-new-component'.